Animate two divs with different duration
<p>i want to do a simulation of two athletes doing a race against each other. I have their three split times and two transition times.</p>

<p>So, the race will be: split 1, transition 1, split 2, transition 2, split 3</p>

<p>I tried do simulate it this way:</p>

<pre><code>$(window).load(function(){
jQuery("#box1").animate({ width: "100%" }, {duration: 100}).animate({ width: "100%" }, 10&gt;).animate({ width: "100%" }, 1000%&gt;).animate({ width: "100%" }, 100%&gt;).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);
});
</code></pre>

<p>If Athlet 1 (box1) is in all splits faster, than it is working. But in the example above, Athlet 2 should be faster in the first split and slower in the second one. But this is not working.</p>

<p>HTML Code:</p>

<pre><code>&lt;div id="box1"&gt;Athlet 1&lt;/div&gt;
&lt;div id="box2"&gt;Athlet 2&lt;/div&gt;
</code></pre>

<p>Can you please help me?</p>

<p>An example in german can be found here: <a href="http://www.trinews.at/trimag/index.asp?f=head2head&amp;VID=703&amp;athlet1=117252&amp;athlet2=117256" rel="nofollow">http://www.trinews.at/trimag/index.asp?f=head2head&amp;VID=703&amp;athlet1=117252&amp;athlet2=117256</a></p>

<p>Thanks</p>
