连接必须等待动画的jquery事件的冗长方式?

时间:2009-10-27 20:59:30

标签: jquery jquery-animate chaining

链接在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);
};

在那种情况下,这是最好/最简洁的方法吗?

2 个答案:

答案 0 :(得分:5)

尝试以下方法.. :))

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

答案 1 :(得分:1)

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