Jquery animation help
<p>Is it possible to animate two divs widths at the same time (one increasing, one decreasing) so that the parent containers overall width remains exactly the same.</p>

<p>As an example, a container div contains 5 child divs.  Teh container div is 1000px wide and 4 of the child divs are 150px wide and another is 400px.  I want to be able to animate the 400px div down to 150px and one of the 150px divs up to 400px;</p>

<p>The problem I am getting is that the parent container shrinks and expands as the animation completes - and it happens noticeable.</p>

<p>I am not looking for a plugin or anything for this, simply some advice on the best way of achieving this.</p>

<p>Many thanks in advance for any help.</p>

<p>EDIT:</p>

<p>The main problem is that every div on the right of the one being animated gets pulled to the left and then sent back out when complete.</p>

<p>Here is the code I am using</p>

<pre><code>    &lt;style type='text/css'&gt;
    .panel-wrapper {
        width: 954px;
        height: 372px;
        background-color: #fff;
        position: relative;
        overflow: hidden;
    }
    .panel-wrapper .panel {
        margin-right: 1px;
        height: 100%;
        width: 64px;
        float: left;
        background-color: #cacaca;
    }
    #home-panel {
        width: 359px;
    } 
    .panel.last {
        margin-right: 0;
    }
&lt;/style&gt;

&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
jQuery(document).ready(function() {
    jQuery('.panel').mouseenter(function() {
        jQuery('.panel-wrapper .open').stop().animate({width:"64px"},400, 'linear');
        jQuery('.panel-wrapper .open').removeClass('open');
        jQuery(this).addClass('open');
        jQuery(this).stop().animate({width:"359px"},400, 'linear');
    });
});
//]]&gt;
&lt;/script&gt;

&lt;div class='panel-wrapper'&gt;
    &lt;div id='home-panel' class='panel open'&gt;
    &lt;/div&gt;

    &lt;div class='panel'&gt;
    &lt;/div&gt;

    &lt;div class='panel'&gt;
    &lt;/div&gt;

    &lt;div class='panel'&gt;
    &lt;/div&gt;

    &lt;div class='panel'&gt;
    &lt;/div&gt;

    &lt;div class='panel'&gt;
    &lt;/div&gt;

    &lt;div class='panel'&gt;
    &lt;/div&gt;

    &lt;div class='panel last'&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
