在Jquery中排队动画 [英] Queuing animations in Jquery
问题描述
我正在尝试创建一个网页，其中有一些span元素，这些元素可能会一个接一个地向下滑动.但是我无法控制动画，并且动画必须同时执行.我在下面有尝试过的示例代码.
下面是身体.
I''m trying to create a webpage in which i''ve a few span elements which is expected to slideDown one by one. But i''m not able to control the animation and it''s getting executed all at the same time. I''ve the sample code which tried with, below.
Below is the body.
<body>
<div id="Line1">
<br />
<br />
<br />
<span id="spanA" style="background-color: Red; width: 10px; height: 18px;"></span>
<br />
<br />
<span id="spanB" style="background-color: Red; width: 20px; height: 8px;"></span>
<br />
<br />
<span id="spanC" style="background-color: Red; width: 30px; height: 8px;"></span>
<br />
<br />
<span id="spanD" style="background-color: Red; width: 40px; height: 8px;"></span>
<br />
<br />
<span id="spanE" style="background-color: Red; width: 50px; height: 8px;"></span>
<br />
<br />
<span id="spanF" style="background-color: Red; width: 60px; height: 8px;"></span>
<br />
<br />
<span id="spanG" style="background-color: Red; width: 70px; height: 8px;"></span>
<br />
<br />
</div>
</body>
和jQuery部分
and the jQuery part
$(document).ready(function() {
$("div span").animate({ width: '+=50px' }, {
speed: "slow",
easing: "linear",
step: function() { setTimeout('', 1000) },
queue: false
});
});
任何人都可以告诉我代码/语法是否有错误，或者是否有更好的排队动画的方法?
谢谢，
Daion
Can anyone please tell me if there is any mistake in the code/syntax or if there is a better way to queue animation?
Thanks,
Daion
推荐答案
(文档).ready( function (){
(document).ready(function() {
(" ).animate({width:' + = 50px'}，{ 速度:" ， 缓动:" ， 步骤:函数(){setTimeout(' '， 1000 )}， 队列: false }); });
("div span").animate({ width: '+=50px' }, { speed: "slow", easing: "linear", step: function() { setTimeout('', 1000) }, queue: false }); });
任何人都可以告诉我代码/语法是否有错误，或者是否有更好的排队动画的方法?
谢谢，
Daion
Can anyone please tell me if there is any mistake in the code/syntax or if there is a better way to queue animation?
Thanks,
Daion
尝试这个！也许这就是您想要实现的目标...
您可以模拟队列！?将延迟变量更改为所需的值以获得您喜欢的效果...
Hi,
Try this! Maybe this is what you want to achieve...
You can simulate queue!? Change delay variable to desired value to get effect you like...
这篇关于在Jquery中排队动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
