javascript - 连续运行 jQuery 动画

Question

我有一组淡出动画，之后我想运行一组 animation 调用。

如何确保一个接一个运行？

如果我这样做:

$(div1).fadeOut(600);
$(div2).fadeOut(600);
$(div3).fadeOut(600);

$(div4).animation({opacity:1},600);
$(div5).animation({opacity:1},600);
$(div6).animation({opacity:1},600);

动画并行运行。

上面的代码只是问题的简化/抽象。我无法将所有调用组合到一个函数中，在现实生活中元素的数量是可变的，每个元素都由它自己的类管理。

Answer 1

您可以使用 jQuery deferred objects :

var deferred = [
    new $.Deferred(),
    new $.Deferred(),
    new $.Deferred()
];

$(div1, div2, div3).each(function(i, elem) {
    $(elem).fadeOut(600, function() { deferred[i].resolve(); });
});

$.when(deferred[0], deferred[1], deferred[2]).done(function() {
    $(div4, div5, div6).each(function(i, elem) {
        $(elem).animation({ opacity : 1 }, 600);
    });
});

正如@Felix 在评论中指出的，$.when 的更清晰的语法如下所示:

$.when.apply(null, deferred).done(function() {
    $(div4, div5, div6).each(function(i, elem) {
        $(elem).animation({ opacity : 1 }, 600);
    });
});