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的 - 如何確定最後一個元素正在動畫

回答

相關問題