menos detalhado maneira de eventos da cadeia de jQuery que tem que esperar por animações?

Question

O encadeamento é grande em jQuery, mas cadeias o gatilho de cada evento e não esperar que o evento anterior ao fim. Isso é perceptível principalmente quando animadora.

Como tal, a solução que eu tenho visto é a utilização de funções de back chamada. O único inconveniente é se, digamos, você tem 4 coisas que você deseja animar em sucessão.

Na verdade, esta é provavelmente algo que você não quer fazer muito frequentemente, mas quando o fizer, a marcação parece ficar um pouco detalhado. Exemplo (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);
};

Nessa situação, é que a melhor maneira / mais sucinta de fazer as coisas?

Answer 1

Tente o seguinte ..:)

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);