jquery - 在 jQuery 动画上使用延迟

Question

我正在使用此代码为 3 个 div 设置动画，如何添加延迟以使动画逐步发生。现在 3 个 div 会同时设置动画。请帮我。

这是我的代码： $(document).ready(function() {

//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.动画（
   {marginTop:'80px',不透明度:1},
   {持续时间：“慢”，缓动：“easeOutBounce”}，
   功能（）
   {

      iPhoneTwo.animate(
         {marginTop:'80px',不透明度:1},
         {持续时间：“慢”，缓动：“easeOutBounce”}，
         功能（）
         {

             free.show("快");

         }
      );

   }
);

Answer 2

我解决了。这是代码：
$(document).ready(function() {

//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");

});