動畫不同時間的兩個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

回答

相關問題