Home » Jquery » javascript – jQuery – Animation ordering divs with InsertAfter() method

javascript – jQuery – Animation ordering divs with InsertAfter() method

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have N number of divs with the following structure:

<div id="cardContainer">
                <div class="row" data-hj-masked="">

                </div>
                <div class="row">
                    <div id="cardCuenta2" class="cardCuentas" tabindex="0" saldo="34892054,03" tipo="CajaAhorro" moneda="Pesos" esprincipal="esPrincipal" style="position: relative;">
                        <label style="padding-right: 50px;" class="control radiobutton" data-hj-masked="">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <strong class="TextCard titulo" data-hj-masked="">Caja Ahorro pesos 007-4</strong>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <text class="TextCard Texto"> Saldo disponible: $ 34.892.054,03</text>
                            </div>
                            <input class="radio" type="radio" name="radio" id="radioCuenta2" value="2" checked="checked" onclick="seleccionarCheck()" data-hj-masked="">
                            <div class="radiobutton-indicator" data-hj-masked=""></div>
                        </label>
                    </div>
                </div>
                <div class="row" data-hj-masked="">

                </div>
                <div class="row">
                    <div id="cardCuenta0" class="cardCuentas" tabindex="1" saldo="99620000,0" tipo="CuentaCorriente" moneda="Pesos" style="position: relative;">
                        <label style="padding-right: 50px;" class="control radiobutton" data-hj-masked="">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <strong class="TextCard titulo" data-hj-masked="">Cuenta Corriente pesos 007-1</strong>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <text class="TextCard Texto"> Saldo disponible: $ 99.620.000,00</text>
                            </div>
                            <input class="radio" type="radio" name="radio" id="radioCuenta0" value="0" onclick="seleccionarCheck()" data-hj-masked="">
                            <div class="radiobutton-indicator" data-hj-masked=""></div>
                        </label>
                    </div>
                </div>
                <div class="row" data-hj-masked="">

                </div>
                <div class="row">
                    <div id="cardCuenta1" class="cardCuentas" tabindex="2" saldo="499998,0" tipo="CuentaCorriente" moneda="Pesos" style="position: relative;">
                        <label style="padding-right: 50px;" class="control radiobutton" data-hj-masked="">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <strong class="TextCard titulo" data-hj-masked="">Cuenta Corriente pesos 007-0</strong>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <text class="TextCard Texto"> Saldo disponible: $ 499.998,00</text>
                            </div>
                            <input class="radio" type="radio" name="radio" id="radioCuenta1" value="1" onclick="seleccionarCheck()" data-hj-masked="">
                            <div class="radiobutton-indicator" data-hj-masked=""></div>
                        </label>
                    </div>
                </div>
</div>

And through jQuery, under certain circunstances, move first or last (with InsertAfter and InsertBefore mehthods) a div within cardContainer.

function moveCardLast(idCard) {
            var posicionIndice = idCard.slice(-1);          
            $('#radioCuenta' + posicionIndice).is(':checked') ? idCardAnterior = idCard : false;            
            $("#" + idCard).insertAfter($("#cardContainer .cardCuentas").last());
        }

        function moveCardFirst(idCard) {
            if (idCard == idCardAnterior){
                var posicionIndice = idCard.slice(-1);
                $('#radioCuenta' + posicionIndice).prop('checked', true);
                idCardAnterior = '';
            }           
            $("#" + idCard).insertBefore($("#cardContainer .cardCuentas").first());
        }

What I want to do now is to animate the div that is moving to the top or the bottom. I tried this aprroach, seen in other question: https://codepen.io/dineshnisshanka/pen/KKPzXJB but it seems that this doesn’t work with a variable number of divs.

Any suggestions ? Thanks.

How to&Answer: