jQuery : Animate Widths of Adjacent Floating Divs

I'm playing around with a little jquery animation and trying to achieve a very specific effect.

If anyone remembers the old Xbox menus with the panes or 'blades开发者_Go百科' 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.

Essentially the HTML looks like this:

 <div class="pane active">
</div>

<div class="pane">
</div>

<div class="pane">
</div>

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.

Here is the basic jquery event that handles the shrinking and expanding.

 // $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);

The only problem I am having is occasionally 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.

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

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

The jQuery documentation says there's a callback function in the animate parameters. "This can be useful for stringing different animations together in sequence."

Not sure I'm 100% understanding your question, and without seeing more of your code, can you do something like:

$active.animate( { 'width' : '100px' }, 200, function(){
    $(this).animate( { 'width' : activeWidth }, 200);
});