连续运行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 延迟对象:

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