如何鏈接jQuery動畫和暫停？

Question

嗨我想在jQuery中做一個簡單的鏈式動畫，每幀之間有一個暫停（setTimeout）。

說每個div動畫的持續時間爲3500.我想控制動畫中每個不透明漸隱之間的持續時間。在第一格和第二格之間說，持續時間是5秒，也許在第二格和第三格之間是10秒。

你會怎麼做呢？

http://codepen.io/leongaban/pen/Feroh

當前代碼

$('#blue').animate({ 
      opacity: '1' 
     }, 3500, function(){ 

     // Need 5 sec pause here    

     $('#blue').fadeOut('fast'); 
     $('#orange').animate({ 
      opacity: '1' 
      }, 3500, function(){ 

       // Need a 10 sec pause here 

       $('#orange').fadeOut('fast'); 
       $('#green').animate({ 
       opacity: '1' }, 3500); 

      }); 
     }); 

Answer 1

這就是delay()和queue()是：

$('#blue').animate({opacity: '1'}, 3500).delay(5000).queue(function() { 
    $(this).fadeOut('fast'); 
    $('#orange').animate({opacity: '1'}, 3500).delay(10000).queue(function() { 
     $(this).fadeOut('fast'); 
     $('#green').animate({opacity: '1'}, 3500); 
    }); 
}); 

FIDDLE

Answer 2

您可以使用jQuery淡出/淡入方法與回調。

查看here瞭解更多信息。

但實質上是;

$(".myClass").fadeOut(1000, function() { 
    //fadeOut complete 
}); 

第一個參數是時間長度（以毫秒爲單位），直到它完全消失。經過這段時間後，回調火災。所以你可以放心地假設，當回調觸發你所需的等待時間已經完成。

這也是fadeIn的語法，但我建議閱讀我提供的鏈接。它會更詳細地解釋它。

Answer 3

這正是.delay（）的用途（http://api.jquery.com/delay/）。它可以讓你寫的動畫像這樣單個元素的優雅鏈：

$("#foo").slideUp(300).delay(800).fadeIn(400); 

請注意，您仍然需要使用回調，開始對其他對象的動畫，雖然。

在你的情況，這應該是它（未經）：

$('#blue') 
    .animate({ opacity: '1' }, 3500) 
    .delay(5000) 
    .fadeOut('fast', 
      function() { 
       $('#orange') 
        .animate({ opacity: '1' }, 3500) 
        .delay() 
        .fadeOut('fast', 
           function() { 
            $('#green') 
             .animate({ opacity: '1' }, 3500); 
           }); 
      });