predection of animation results required

predection of animation results required

Hi.

I am working on a free web component, http://mediabeez.ws/lah, which often resizes itself according to the amount of content currently in view.
This works by calling .show(animDuration) and .hide(animDuration) on several of the <div>s it contains.

However, the root-parent <div> also needs to resize according to how much content is currently viewed in the component.
With jQuery, one can (imo) only do this if one calls the component's resizeWindow() function like so:
component.showHideItem : function (itemID, show) {
....
$('#somediv1').show (animDuration);
$('#somediv2').hide(animDuration);
$('#somediv3').show(animDuration+100, component.resizeWindow);
component.resizeWindow() basically does
  some .width=browserWidth resizing of some container <div>s in the component.
  a $('#componentWindow').animate ({
    width:'[browserWidth]px',
    height:'auto',
    top:'[browserHeight-component.windowHeight]px',
  }); 
....

if key <div>s along the display chain are set to style="height:auto; width:100%", then one can use $('#componentMainWindow').height() to correctly get the current height, after all the (other) animations are done. Hence the +100 on the last call to .show/hide.

this has the disadvantage that the "total" animation does 2 "steps"; internal resize followed by external resize/reposition.
this behavior is currently demonstrated in lah(), see the demo on the url listed at the top of this thread.

i would like to know if there's any way to make it all into 1 step, where the animation to the component's window runs at the same time as the animations to the <div>s nested within the component.

i don't think this will be easy in any way, because i want to use a function as the final step in the animation process. maybe i don't have to even...?