动画不同时间的两个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
感谢
从什么@LLAlive取得了,我已经开始,并试图使其作为你的榜样工作。
这里就是我想出了迄今为止
它将该投入的3次分裂,并把它们转换成秒后会做根据条目动画。 然后动画将分割成3个分割,结果如预期。
例:
播放机1:5秒==>6秒==>7秒= 18秒
玩家2:8秒==>5秒==>5秒= 18秒
如果您尝试了这些数字,您会发现它们按预期方式工作,两者都将在相同的总时间内完成,但会因当前拆分而异。
试试看,如果这是你想要的,请告诉我。
再次,感谢你“LLAlive”
* *更新:我已经改变了“宽松”,以配合您的例子,它现在作为实际运行的div更自然:) 检查它出来了:http://jsfiddle.net/ML3h6/7/
检查此琴:
http://jsfiddle.net/ML3h6/
你不需要的东西?
或者我这里是在那里你可以通过时间(秒)的功能race()
:
http://jsfiddle.net/nUBqk/
不是真的:看到同样的问题在这里:http://jsfiddle.net/ML3h6/4/ 我认为,两者应该在同一时间完成? ;-) – 2012-08-17 11:48:42
plz在这里添加你的html为 – LLAlive 2012-08-17 11:14:50
为什么所有的宽度都是100%? – Archer 2012-08-17 11:28:34
在我的帖子上面添加了html。 – 2012-08-17 11:31:41