在 jQuery 动画上使用延迟答案

【问题标题】：Use delay on jQuery Animation在 jQuery 动画上使用延迟
【发布时间】：2012-07-18 19:14:58
【问题描述】：

我正在使用此代码为 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");

});

【问题讨论】：

标签： jquery animation delay

【解决方案1】：

我想这是一种方法：

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

【讨论】：

【解决方案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");

});

【讨论】：