title: How can I get jquery to execute animations in exact parallel?
body: <p>I'm trying to create an accordion widget in jquery similar to <a href="http://jqueryui.com/demos/accordion/" rel="nofollow noreferrer">jquery's accordion plugin</a>, with the difference that I want the handles to appear below their respective content instead of above.  My accordion works by decreasing the height of the open content section while at the same time increasing the height of the clicked content section.  I've posted an example <a href="http://cobradragon.com/~adam/accordion/" rel="nofollow noreferrer">here</a>.  My problem is that the animations aren't started at exactly the same time, and there is a noticeable "jump" due to the slight delay before the second animation is started.</p>
  
  <p>Scriptaculous has a function called <a href="http://wiki.github.com/madrobby/scriptaculous/effect-parallel" rel="nofollow noreferrer">Effect.Parallel</a> that allows you to create an array of animation effects and execute them in parallel.  Unfortunately, I can't seem to find something similar with jquery.  </p>
  
  <p>Is there a way I can run precise parallel animations on separate divs in jquery?</p>
  
  <p>Edit: I'm as much interested in alternative methods of coding this accordion widget.  So if there is any other method people think would work I'm open to that.</p>