¿Una forma menos detallada de encadenar eventos jquery que tienen que esperar animaciones?

Question

El encadenamiento es excelente en jQuery, pero encadena el desencadenante de cada evento y no espera a que termine el evento anterior. Esto se nota principalmente cuando se anima.

Como tal, la solución que he visto es utilizar las funciones de devolución de llamada. El único inconveniente es si, por ejemplo, tiene 4 cosas que desea animar sucesivamente.

Es cierto que esto es probablemente algo que no quieres hacer muy a menudo, pero cuando lo haces, el marcado parece ser un poco detallado. Ejemplo (pseudocódigo):

element.animate(fast, callBackFunction1(element1,element2,element3);

function callBackFunction1(element1,element2,element3){
    element1.animate(fast, callBackFunction2(element2,element3));
};

function callBackFunction2(element2,element3){
    element2.animate(fast, callBackFunction3(element3));
};

function callBackFunction3(element3){
    element3.animate(fast);
};

En esa situación, ¿es esa la mejor / más sucinta manera de hacer las cosas?

Answer 1

Pruebe lo siguiente .. :)

element.animate(fast, function() {
    element1.animate(fast, function() {
        element2.animate(fast, function() {
            element3.animate(fast);
        });
    });
});

Answer 2

var animElements = [
    element,
    element1,
    element2,
    element3,
];

function animateChain(elements) {
    if(elements.length > 0) {
        var element = elements.pop();
        element.animate("fast", function(){ animateChain(elements); });
    }
}

animateChain(animElements);