如何在jQuery中创建一个链式延迟动画序列? [英] How create a chained delayed animation sequence in jQuery?
本文介绍了如何在jQuery中创建一个链式延迟动画序列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
考虑使用以下对象:
<div id="d1"><span>This is div1</span></div>
<div id="d2"><span>This is div2</span></div>
<div id="d3"><span>This is div3</span></div>
<div id="d4"><span>This is div4</span></div>
<div id="clickhere"><span>Start animation</span></div>
考虑到我想使用jQuery在列出的四个元素中的每个元素上应用动画之前。
And consider that I would like to apply, using jQuery, an animation on each of the four element listed before.
如果页面符合以下代码,请考虑以下代码:
Consider the following code applied in the head section if the page:
function start_anim() {
$("#d1").animate({top:"-50px"},1000,function(){}); // Animating div1
$("#d2").animate({top:"-50px"},1000,function(){}); // Animating div2
$("#d3").animate({top:"-50px"},1000,function(){}); // Animating div3
$("#d4").animate({top:"-50px"},1000,function(){}); // Animating div4
}
$(document).ready($('#clickhere').click(start_anim));
当事件点击
被解雇。
然而我我希望第一个div先移动,然后我想在第一个div的动画达到50%时进行第二个div移动。第三个和最后一个div相同。
However I would like to have the first div move first, then I would like to have the second div move when the first div's animation has reached the 50%. The same for the third and the last div.
我怎样才能达到这个目的?谢谢你
How can I reach this? Thankyou
推荐答案
类似于:
$("#d1").animate({top:-50}, 1000);
$("#d2").delay(500).animate({top:-50}, 1000);
$("#d3").delay(1000).animate({top:-50}, 1000);
$("#d4").delay(1500).animate({top:-50}, 1000);
甚至更好:
var duration = 1000;
$('#d1,#d2,#d3,#d4').each(function(i) {
$(this).delay( i*(duration/2) ).animate({top:-50}, duration);
});
这篇关于如何在jQuery中创建一个链式延迟动画序列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文