动画不同时间的两个div

我想模拟两个运动员互相竞争。我有他们的三个拆分时间和两个转换时间。动画不同时间的两个div

所以，比赛将是：裂口1，过渡1，拆2，过渡2，拆分3

我试图做到这一点的方式模拟它：

$(window).load(function(){ 
jQuery("#box1").animate({ width: "100%" }, {duration: 100}).animate({ width: "100%" }, 10>).animate({ width: "100%" }, 1000%>).animate({ width: "100%" }, 100%>).animate({ width: "100%" }, 50); 
jQuery("#box2").animate({ width: "100%" }, {duration: 50}).animate({ width: "100%" }, 10).animate({ width: "100%" }, 2000).animate({ width: "100%" }, 100).animate({ width: "100%" }, 500); 
});

如果ATHLET 1（BOX1）分裂的速度比分裂的速度快。但在上面的例子中，Athlet 2应该在第一个分割中更快，而第二个分割中要慢。但是这不起作用。

HTML代码：

<div id="box1">Athlet 1</div> 
<div id="box2">Athlet 2</div>

你能帮帮我吗？

在德国的一个例子可以在这里找到：http://www.trinews.at/trimag/index.asp?f=head2head&VID=703&athlet1=117252&athlet2=117256

感谢

来源

2012-08-17 El Stefano

plz在这里添加你的html为 – LLAlive 2012-08-17 11:14:50

为什么所有的宽度都是100％？ – Archer 2012-08-17 11:28:34

在我的帖子上面添加了html。 – 2012-08-17 11:31:41

从什么@LLAlive取得了，我已经开始，并试图使其作为你的榜样工作。

这里就是我想出了迄今为止

http://jsfiddle.net/ML3h6/6/

它将该投入的3次分裂，并把它们转换成秒后会做根据条目动画。然后动画将分割成3个分割，结果如预期。

例：

播放机1：5秒==>6秒==>7秒= 18秒

玩家2：8秒==>5秒==>5秒= 18秒

如果您尝试了这些数字，您会发现它们按预期方式工作，两者都将在相同的总时间内完成，但会因当前拆分而异。

试试看，如果这是你想要的，请告诉我。

再次，感谢你“LLAlive”

* *更新：我已经改变了“宽松”，以配合您的例子，它现在作为实际运行的div更自然:) 检查它出来了：http://jsfiddle.net/ML3h6/7/

来源

2012-08-17 12:00:18

检查此琴：
http://jsfiddle.net/ML3h6/
你不需要的东西？

或者我这里是在那里你可以通过时间（秒）的功能race()：
http://jsfiddle.net/nUBqk/

来源

2012-08-17 11:33:15 LLAlive

不是真的：看到同样的问题在这里：http://jsfiddle.net/ML3h6/4/ 我认为，两者应该在同一时间完成？ ;-) – 2012-08-17 11:48:42

动画不同时间的两个div

回答

相关问题