jQuery animating 2 independent div widths causing pixel jerkyness.
===

Using two divs aligned side by side by using the float CSS parameter. 

jQuery alters the width of both of them at the same time. This is causing a jerky pixilated agitation. I set up a fiddle but jsfiddle is down. 

How do we make each div width slide simultaneously without this shake.

    <div class="container">
        <div class="div d1">DIV 1</div>
        <div class="div d2">DIV 2</div>
    </div>
    
    <div style="clear:both;"></div>
    </br></br>
    <input class="s1" type="button" value="shift"/>
    <input class="s2" type="button" value="shift back"/>
    ​
    $(document).ready(function(){
        $('.s1').click(function(){
            $('.d1').animate({width:100},{duration:300,queue:false});
            $('.d2').animate({width:300},{duration:300,queue:false});
        });
         $('.s2').click(function(){
            $('.d1').animate({width:100},{duration:300,queue:false});
            $('.d2').animate({width:300},{duration:300,queue:false});
        });
    });​
    .div { display:block; width:200px; height:90px; background:#666; colour:#FFF; float:left; }
    
    .container { border:1px solid #000; background:#EEE; width:400px; }
    input { clear:both;}

​