Façon moins verbeuse de chaîner des événements jquery qui doivent attendre des animations?

Question

Le chaînage est excellent dans jQuery, mais il enchaîne le déclenchement de chaque événement et n'attend pas que l'événement précédent se termine. Ceci est visible principalement lors de l'animation. En tant que tel, la solution de contournement que j'ai vu est d'utiliser des fonctions de rappel. Le seul inconvénient est si, disons, vous avez 4 choses que vous voulez animer successivement.

Certes, c'est probablement quelque chose que vous ne voulez pas faire très souvent, mais quand vous le faites, le balisage semble être un peu verbeux. Exemple (pseudocode):

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

Dans cette situation, est-ce la meilleure/la plus succincte des choses?

Answer 1

Essayez ce qui suit .. :)

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