Synchronized animations

Synchronized animations


I'd like to get some help solving a common animation problem:
Animating two elements at once, like sliding up one element, while
sliding down another at the same time.
I've created a testpage that shows the standard solution that jQuery
promotes, supposedly with improved support since 1.3:
http://jquery.bassistance.de/sync-animations/slideUpDown.html
Fixed in FF: Pretty good, but too much flicker of the bottom edge and
therefor content below
Fixed in IE6: Similar to FF, though even more flicker
Variable in FF: Ugly, there is a big jump at the end, when the real
height snaps in, due to the hidden height being calculated wrong
Variable in IE6: Surprisingly better than FF, still an ugly jump at the end
The jQuery UI accordion puts a lot of effort into providing a better
animation, with mixed results. I wouldn't be posting this if we had a
perfect animation. A simplified testcase:
http://jquery.bassistance.de/sync-animations/accordion.html
Fixed in FF: Bottom edge stable, content below flickers a little bit,
nearly perfect
Fixed in IE6: Ugly jumps at start and end
Variable in FF: Pretty much perfect, content below moves anyway
Variable in IE6: A small initial jump on the first animation, pretty
much perfect otherwise
While it would be nice to get the current accordion solution into
jQuery (once it actually works and hopefully somewhat simplified), the
current priority is to get the accordion working.
I've commited the test files in case someone wants to do a checkout or
fix something: http://jqueryjs.googlecode.com/svn/trunk/plugins/sync-animations/
Feel free to contact me via Jabber (this address) to discuss any
details outside the list. Your help is welcome!
Regards
Jörn