Question

我正在尝试同时为一组元素制作动画（几乎每个动画之间都有一个小延迟）：

$('.block').each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
   }, {
      duration: 250,
      complete: mycallbackfunction // <- this fires the callback on each animation :(
   });
});

如何在所有动画完成后运行回调函数？

Answer 1

在计数器变量周围使用闭包。

var $blocks = $('.block');
var count = $blocks.length;
$blocks.each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
   }, {
      duration: 250,
      complete: function() {
        if (--count == 0) {
          // All animations are done here!
          mycallbackfunction();
        }
      }
   });
});

请注意将项目列表保存到$ block变量中以保存查找。

Answer 2

从jQuery 1.5开始，你可以使用$.when ^[docs]，它更容易编写和理解：

var $blocks = $('.block');

$blocks.each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
   }, {
      duration: 250
   });
});

$.when($blocks).then(mycallbackfunction);

DEMO

Answer 3

当没有动画要做时，

Felix Kling's answer将触发回调。如果动画通过$el.stop() 停止，则会使回调触发甚至，从而无法完成。

我发现了一个使用延迟对象的method by Elf Sternberg我在这个jsfiddle中实现了：

http://jsfiddle.net/8v6nZ/

Answer 4

   var block = $('.block');
   block.each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
    }, {
      duration: 250,
      complete: i== (block.length-1) ? myCallbackFunction : function(){}
    });
   });

Answer 5

$('.block').each(function(i){
   $(this).stop().delay(60 * i).animate({
     'opacity': 1
   }, {
      duration: 250,
      complete: ((i == $('.block').length - 1) ? mycallbackfunction : null)
   });
});

jQuery多个animate（）回调

5 个答案: