在jQuery動畫上使用延遲

Question

我正在使用此代碼來動畫3個div，如何添加延遲以便動畫將一步一步發生。現在3個div在同一時間是有生命的。請幫幫我。

這裏是我的代碼： $（文件）。就緒（函數（）{

//iPhone Animation/Define Variable 
var iPhoneOne = $(".iphoneOne"); 
var iPhoneTwo = $(".iphoneTwo"); 
var free = $(".free"); 

iPhoneOne.animate({marginTop:'80px',opacity:1},{duration:"slow", easing:"easeOutBounce"}); 
iPhoneTwo.animate({marginTop:'80px',opacity:1},{duration:"slow", easing:"easeOutBounce"}); 
free.show("fast"); 

}）;

Answer 1

我想這將是這樣做的一種方法：

 
iPhoneOne.animate(
    {marginTop:'80px',opacity:1}, 
    {duration:"slow", easing:"easeOutBounce"}, 
    function() 
    { 

     iPhoneTwo.animate(
     {marginTop:'80px',opacity:1}, 
     {duration:"slow", easing:"easeOutBounce"}, 
     function() 
     { 

      free.show("fast"); 

     } 
    ); 

    } 
); 

Answer 2

我解決它。下面是代碼：
$（文件）。就緒（函數（）{

//iPhone Animation/Define Variable 
var iPhoneOne = $(".iphoneOne"); 
var iPhoneTwo = $(".iphoneTwo"); 
var free = $(".free"); 

iPhoneOne.animate({marginTop:'80px',opacity:1},{duration:"slow", easing:"easeOutBounce"}); 
iPhoneTwo.delay(500).animate({marginTop:'80px',opacity:1},{duration:"slow", easing:"easeOutBounce"}); 
free.delay(800).show("fast"); 

}）;