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.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

我解决了。这是代码：
$（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");

}）;

在jQuery Animation上使用延迟

2 个答案: