jQuery多个animate（）回调 [英] jQuery multiple animate() callback

问题描述

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

I'm trying to animate a set of elements simultaneously (almost, there's a small delay between each animation):

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

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

How can I run a callback function after all animations have completed?

推荐答案

对计数器变量使用闭包。

Use a closure around a counter variable.

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

Note the saving of the list of items into the $block variable to save a lookup.

这篇关于jQuery多个animate（）回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！