jquery - アニメーションを待たなければならない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);