连续运行jQuery动画

Running jQuery animations serially

本文关键字：动画 jQuery 运行 连续      更新时间：2023-09-26

我有一组淡出动画，之后我想运行一组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);

动画并行运行。

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

你可以使用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);
    });
});

如果你使用的是jQuery 1.6+， deferred.pipe()可以简化代码:

$.Deferred(function (dfr) {
  dfr
  .pipe(function () { return $(div1).fadeOut(600); })
  .pipe(function () { return $(div2).fadeOut(600); })
  .pipe(function () { return $(div3).fadeOut(600); })
}).resolve();

裁判:http://blog.darkthread.net/post - 2011 - 08 - 03 -递延-管- animation.aspx

相关文章：