在jQuery动画上使用延迟
问题描述:
我正在使用此代码来动画3个div,如何添加延迟以便动画将一步一步发生。现在3个div在同一时间是有生命的。请帮帮我。在jQuery动画上使用延迟
这里是我的代码: $(文件)。就绪(函数(){
//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");
});
答
我想这将是这样做的一种方法:
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"); } ); } );
答
我解决它。下面是代码:
$(文件)。就绪(函数(){
//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");
});