0

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' 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.

febs
  • 145
  • 1
  • 1
  • 12

1 Answers1

1

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);
});
awshepard
  • 2,627
  • 1
  • 19
  • 24
  • Yea, i'll have to upload a diagram. Callback would eliminate that weird gap so I might fall back on that, but what I'm shooting for is when these divs animate simulatneously. It looks as if the expanding div pushes the currently active one into it's narrow state. Hard to describe. – febs Jul 07 '10 at 18:03
  • Oh, so you are looking for simultaneous shrinking of the one div, and expanding of the other? It's just not happening consistently? I've noticed some weird things with jQuery animations - stuff happening seemingly out of sequence, etc. There's an SO question (http://stackoverflow.com/questions/2103385/javascript-event-sequence) that may be of (arguably limited) use, and there's also a more generic article (http://ejohn.org/blog/how-javascript-timers-work/) about javascript events. – awshepard Jul 07 '10 at 21:11
  • Yup that's it exactly. Thank you very much for the resources and time spent on my question. Very interesting stuff. It seems like on a random basis the animations get slightly offset in the event/execution stack (or whatever you'd like to call it). I'll try triggering the animations 'separate' from the click, like maybe set up a small timer to see if that changes the results. – febs Jul 08 '10 at 12:33