按順序延遲的jQuery動畫

Question

嘿，我試圖按順序調出動畫。目前下面的代碼似乎他們都召喚出在同一時間甚至與延遲功能（這似乎並沒有在所有的工作...）

$(".overlayChoice1").delay(500).animate({ 
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })    
$(".overlayChoice2").delay(500).animate({ 
    top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }) 
$(".overlayChoice3").delay(500).animate({ 
    top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }) 
$(".overlayChoice4").delay(500).animate({ 
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }) 

什麼所有我需要做的爲了一次執行一個？

Answer 1

如果你想在動畫順序發生，你應該窩在complete回調的每個動畫事先：

$(".overlayChoice1").delay(500).animate({ 
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){ 
    $(".overlayChoice2").delay(500).animate({ 
     top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){ 
     $(".overlayChoice3").delay(500).animate({ 
     top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){ 
      $(".overlayChoice4").delay(500).animate({ 
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }); 
     }) 
    }) 
}) 

.animate參考：

Answer 2

你要麼需要發送的下一個作爲回調或使用增量延遲。

回調：

$(".overlayChoice1").delay(500).animate({ 
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){ 
    $(".overlayChoice2").delay(500).animate({ 
     top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){ 
     $(".overlayChoice3").delay(500).animate({ 
      top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){ 
      $(".overlayChoice4").delay(500).animate({ 
       top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){ 
      }); 
     }); 
    }); 
}); 

增量延遲：

$(".overlayChoice1").delay(500).animate({ 
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })    
$(".overlayChoice2").delay(2700).animate({ 
    top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }) 
$(".overlayChoice3").delay(4900).animate({ 
    top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }) 
$(".overlayChoice4").delay(7100).animate({ 
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }) 

Answer 3

$(".overlayChoice1").animate({ top: '-15px' }, 1700, "easeOutElastic", function() { 
 
    // Animation overlayChoice1 complete. 
 
    $(".overlayChoice2").animate({ top: '-45px' }, 1700, "easeOutElastic", function() { 
 
     // Animation overlayChoice2 complete. 
 
     ..... 
 
    } }) 
 
    });

Answer 4

就個人而言，我會使用一個更DRY implementation不重複這麼多的代碼並基於t觸發下一個動畫他完成前一個回調：

function runAnimations() { 
    var cntr = 1, top = -15; 
    function next() { 
     if (cntr <= 4) { 
      $(".overlayChoice" + cntr).delay(500) 
       .animate({top:top+'px'}, {duration:1700, easing:'easeOutElastic'}, next); 
      ++cntr; 
      top -= 30; 
     } 
    } 
    next(); 
}