Obtener funciones para ejecutar en el momento adecuado (en cola o simultáneamente)

StackOverflow https://stackoverflow.com/questions/5927222

  •  30-10-2019
  •  | 
  •  

Pregunta

He escrito un pequeño guión que baraja aleatoriamente una serie de divs: esto funciona como se esperaba (o esperaba).

Mi problema está en la implementación. Quiero que los Divs se desvanezcan, se barajen y se desvanezcan nuevamente. Lo que he encontrado es que la función MoveBox () se ejecuta simultáneamente con cualquier animación. He intentado llamarlo como una función de devolución de llamada a todos los elementos (FadeOut, Delay y Fadein) en la animación, pero siempre con el mismo efecto: el barajamiento y la redistribución de los DIV ocurren durante la animación y, por lo tanto, es visible.

Tengo una solución (var ts = tiempo de espera ...) que hace que la mezcla suceda mientras los DIV están ocultos, pero no estoy convencido de que esta sea la mejor solución.

Me gustaría saber cómo controlar el orden de ejecución de funciones y si deben ejecutar simultáneamente o en secuencia. Mi código :

<style>
    .tester{
        float:left;
        width:100px;
        height:100px;
        margin:5px;
        }
    .tester p{text-align:center;
        margin-top:20px;
    }
    .one{background-color:red;}
    .two{background-color:yellow;}
    .three{background-color:teal;}
    .four{background-color:blue;}
    .five{background-color:green;}
    .six{background-color:silver;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        var anibase=jQuery(".tester").length;
        jQuery(".tester").fadeOut(1000);
        function moveBox(){
            function shuffle(){
                for (i = 0; i <= (anibase - 2); i++) {
                    mover = Math.floor(Math.random() * (anibase - i));
                    if (mover != 0) {
                        mover = mover + i;
                        jQuery(".tester:eq(" + mover + ")").insertBefore(".tester:eq(" + i + ")");
                    };
                };
            };
            jQuery(".tester").fadeOut(1500).delay(500).fadeIn(1500);
            var ts = setTimeout(shuffle,1500);
            var t=setTimeout(moveBox,5000);
        };
        moveBox();
    });

</script>
<body>
    <div class="tester one">
        <p>box 1</p>
    </div>
    <div class="tester two">
        <p>box 2</p>
    </div>
    <div class="tester three">
        <p>box 3</p>
    </div>
    <div class="tester four">
        <p>box 4</p>
    </div>
    <div class="tester five">
        <p>box 5</p>
    </div>
    <div class="tester six">
        <p>box 6</p>
    </div>
</body>

gracias de antemano

No hay solución correcta

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top