jQuery : Animate Widths of Adjacent Floating Divs
<p>I'm playing around with a little jquery animation and trying to achieve a very specific effect.</p>

<p>If anyone remembers the old Xbox menus with the panes or 'blades' as they called them, I'm going for something like that using a series of left floating divs. When the page loads, one pane is active and has a large width, displays some information etc. while the other panes are condensed into a very small width.  When a smaller pane is clicked on the active pane shrinks to a narrow width, and the clicked expands to display content.</p>

<p>Essentially the HTML looks like this:</p>

<pre><code> &lt;div class="pane active"&gt;
&lt;/div&gt;

&lt;div class="pane"&gt;
&lt;/div&gt;

&lt;div class="pane"&gt;
&lt;/div&gt;
</code></pre>

<p>I'm currently using javascript (jquery) to define all the widths based on the window size so that the panes fill up the whole screen.</p>

<p>Here is the basic jquery event that handles the shrinking and expanding.</p>

<pre><code> // $active is the current wide pane
// $(this) is the clicked pane
// activeWidth is a predefined constant
$active.animate( { 'width' : '100px' }, 200 );
$(this).animate( { 'width' : activeWidth }, 200);
</code></pre>

<p>The only problem I am having is <em>occasionally</em> during this animation, the shrink/grow appear to start at different times (I'm not sure) and create an unpleasant empty space to the far right of the page.</p>

<p>Is there a way to ensure that these two actions happen consistantly in sync? I considered replicating this using absolute positioning.</p>

<p>I'm at work so I can't upload a diagram, but I will try to later if it's too confusing.</p>
