Problem with animate jquery div with different pace
<p>While I was animating two boxes with jQuery at same pace with setting marginTop, the second box will move faster than the first box.</p>

<pre><code>&lt;div id="box1" style="width:500px;height:80px;background-color:blue;"&gt;box 1&lt;/div&gt;
&lt;div id="box2" style="width:500px;height:80px;background-color:green;margin-left:510px;"&gt;box 2&lt;/div&gt;


&lt;script type="text/javascript"&gt;
    jQuery("#box1").animate({marginTop:"-=80px"}, {duration: 1500});            
    jQuery("#box2").animate({marginTop:"-=80px"}, {duration: 1500});
&lt;/script&gt;
</code></pre>

<p>However, when I apply the same setting Top, both box move at same pace. </p>

<pre><code>&lt;div id="box1" style="width:500px;height:80px;background-color:blue;position:relative;"&gt;box 1&lt;/div&gt;
&lt;div id="box2" style="width:500px;height:80px;background-color:green;margin-left:510px;position:relative;"&gt;box 2&lt;/div&gt;


&lt;script type="text/javascript"&gt;
    jQuery("#box1").animate({top:"-=80px"}, {duration: 1500});          
    jQuery("#box2").animate({top:"-=80px"}, {duration: 1500});
&lt;/script&gt;
</code></pre>

<p>Any idea why this happening this way?</p>
