jQuery的 - 如何确定最后一个元素正在动画

我使用jQuery的动画函数来动画一系列匹配的元素，但我想确定何时最后一个匹配元素已完成动画之前调用一个新的功能。我将如何做到这一点？有没有办法做到没有.each（）函数？jQuery的 - 如何确定最后一个元素正在动画

这是我的代码：

使用各种功能：

var imageLen = $('.option_image').length -1; //Determine index of total images 

    $('.option_image').each(function(index){ 
     var imageDelay = index*delayTime; 

     $(this).delay(imageDelay).animate({ 'backgroundPositionY' : '0px', 'opacity' : '1'},fadeTime,function(){ 
      $('.option_title').css('opacity','1'); 

      if (index == imageLen){ 
       //If all have been iterated through - perform this function 
      } 
     }) 
    });

但我想要做的是：

$('.option_image').animate({ 'backgroundPositionY' : '0px', 'opacity' : '1'},fadeTime,function(){ 
    if (index == imageLen){ 
     $('.option_title').css('opacity','1'); 
     $('#back').fadeTo(fadeTime,1); 
     $('#restart').fadeTo(fadeTime,1); 
    } 
});

这显然不会，因为 “指数” 的工作没有定义的。

来源

2011-08-23 mheavers

你试过用.animate（）完成回调吗？完成动画完成后调用，可以让该函数启动一个新的动画，或者您可以让一个对象跟踪哪些元素正在动画，然后让完整的函数将该元素从对象中取出。 –

需要在所有元素都完成动画时触发，而不是在每个元素动画之后触发。 – mheavers

尝试使用递延对象：

$('.option_image').animate({ 
    'backgroundPositionY': '0px', 
    'opacity': '1' 
}, fadeTime).promise().done(function() { 
    $('.option_title').css('opacity', '1'); 
    $('#back').fadeTo(fadeTime, 1); 
    $('#restart').fadeTo(fadeTime, 1); 
});

这需要jQuery的1.6+

来源

2011-08-23 15:19:33

太棒了！我们可能会被迫使用1.4，但如果不是，这是一个很酷的新功能。 – mheavers

你可以使用一个封闭，像这样：

var index = 0; 
var length = elements.length - 1; 
elements.animate(properties, speed, function() { 
    if (index == length) { 
     doSomeStuff(); 
    } else index++; 
});

来源

2011-08-23 15:24:18 DNS

jQuery的动画添加到队列中。您可以在完整回调中测试队列的大小。我认为这将工作：

$('.option_image').animate({ 'backgroundPositionY' : '0px', 'opacity' : '1'},fadeTime,function(){ 
    if ($('.option_image').queue("fx").length === 0){ 
     $('.option_title').css('opacity','1'); 
     $('#back').fadeTo(fadeTime,1); 
     $('#restart').fadeTo(fadeTime,1); 
    } 
});

来源

2011-08-23 15:44:55

jQuery的 - 如何确定最后一个元素正在动画

回答

相关问题