アニメーションを待たなければならないjqueryイベントを連鎖するより冗長な方法ですか？

Question

連鎖はjQueryで優れていますが、各イベントのトリガーを連鎖させ、前のイベントが終了するのを待ちません。これは主にアニメーション化するときに顕著です。

そのため、私が見た回避策は、コールバック関数を使用することです。唯一の欠点は、たとえば、連続してアニメーション化したいものが4つある場合です。

確かに、これはおそらくあまり頻繁に行いたくないことですが、そうするとマークアップが少し冗長になるようです。例（擬似コード）：

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

その場合、それは物事を進めるための最良/最も簡潔な方法ですか？

Answer 1

次のことを試してください..：）

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