jQuery 多个 animate() 回调

Posted 2023-05-08

【中文标题】jQuery 多个 animate() 回调

【英文标题】：jQuery multiple animate() callback

【发布时间】：2011-08-14 23:16:03

【问题描述】：

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

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

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

【问题讨论】：

您可以拥有每个单独的动画。增加一个值，如果该值是 = 动画数，则运行实际函数

在整个 $(".block").each 语句之后不能调用 mycallbackfunction 有什么原因吗？还是我误解了你的代码？

是的。如果我这样做，该函数将立即执行。我想等待动画完成，然后执行它

对最后一个动画有单独的回调。

【参考方案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 变量中以保存查找。

【讨论】：

只需在myCallbackFn() 中进行减量...但这是我看到的唯一答案

为了在mycallbackfunction()中进行减量，需要在与count相同的范围内定义。 OP 的示例没有显示 mycallbackfunction() 的定义位置。

谢谢！这似乎有效 :D 但你有一个错误：它应该是 if (count == 0) mycallbackfunction();

ps：你知道如何同时递减和检查count吗？

你可以这样做： if (--count == 0) ...

【参考方案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

【讨论】：

即使动画通过.stop()停止也会触发回调。

【参考方案3】：

Felix Kling's answer 将在没有动画可做时触发回调。如果动画通过$el.stop()停止，因此回调会触发甚至，因此未完成到最后。

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

http://jsfiddle.net/8v6nZ/

【参考方案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()
    );
   );

【参考方案5】：

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