javascript - jQuery 多个 animate() 回调

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 变量中以保存查找。