jQuery中两个div连动时的问题，高手帮忙一下！

HTML代码：
<div style="width:1000px;height:300px;background-color:#000000">
<div id="leftdiv" style="width:500px;height:100px;float:left;background-color:red"></div>
<div id="rightdiv" style="width:500px;height:100px;float:left;background-color:green"></div>
</div>Javascript代码：
jQuery(document).ready(function(){
    $('#leftdiv').animate({width:1},2000);
    $('#rightdiv').animate({width:999},2000);
  });执行的时候，两个div经常会错位，如果自己来通过setTimeout来实现这个效果是没有问题，但是animate总是有这个问题，移动速度越慢，问题越严重，不管是jQuery1.3还是1.5.1都有这个问题。
请教一下jQuery怎么能避免这个问题。

解决方案 »

  1.   

    另外，一个div执行两个动作也会有这样的问题，比如一个div从右向左移动，并且div长度变大。
      

  2.   

    大家把上面的代码执行一下，问题就非常明显了，两个颜色的div在移动过程中位置会乱。
      

  3.   

    那就尽量避免两个同时动作呀，貌似没有更好的办法了
    <script type="text/javascript">
    <!--
    jQuery(document).ready(function(){
        $('#rightdiv').animate({width:999},2000);
      });//-->
    </script>
    <body>
    <div style="width:1000px;height:300px;background-color:#000000">
    <div id="leftdiv" style="width:1000px;height:100px;background-color:red"><div id="rightdiv" style="width:500px;height:100px;float:right;background-color:green"></div></div>
    </div>
    </body>
      

  4.   

    http://jsfiddle.net/4zWbW/
    IE9下挺流畅的
      

  5.   

    IE9没测试，不过你把上面的代码修改一下，在IE9下试试看，移动的时候右边是否有黑色的竖线，移动完成后竖线消失。
    <div style="width:400px;height:100px;background-color:#000000;overflow:hidden">
        <div id="leftdiv" style="width:200px;height:100px;float:left;background-color:red"></div>
        <div id="rightdiv" style="width:200px;height:100px;float:left;background-color:green"></div>
    </div>
    $('#leftdiv').animate({
        width: 1
    }, 3000);
    $('#rightdiv').animate({
        width: 399
    }, 3000);
      

  6.   


    jQuery(document).ready(function(){ 
    $('#leftdiv').animate({width:1},2000); 
    $('#rightdiv').animate({width:999},2000); 
    });
    出现DIV错位的猜测，我个人感觉是：按照JS执行顺序，从上到下，表面上看起来似乎2个代码是同时进行的！LEFT和RIGHT的宽度随时都在改变，而且是2秒内完成！
    而实际上是不可能2个同时开始的，先运行的应该是left的宽度变化，然后马上向下执行RIGHT，这个时间因浏览器而不同，这个时间差导致了2个DIV错位，当animate执行时间非常短，接近JS代码上下旋接的时间差的时候，错位就不明显，甚至可以忽略！而时间差越大越明显！