This is my code:
<style type='text/css'>
.kwick-ul { padding:0; list-style-type:none; }
.kwick-li { margin:0; display:inline-table; padding:0; border:none}
.kwick-div { margin:0; overflow:hidden; width:60px; height:20px }
</style>
<ul class='kwick-ul'>
<li class='kwick-li'>
<div class='kwick-div' style='width:60px'> <div>Menu 1</div> </
div>
</li>
<li class='kwick-li'>
<div class='kwick-div'> <div>Menu 2</div> </div>
</li>
<li class='kwick-li'>
<div class='kwick-div'> <div>Menu 3</div> </div>
</li>
</ul>
<script type='text/javascript'>
$('.kwick-div').mouseover( function(){
$(this).animate( { width:'80px' }, 200 );
$('.kwick-div').not( $(this) ).animate( { width:'50px' }, 200 );
});
</script>
Because the animation on the div that is being expanded triggers
before the animation that shrinks all other divs i get the total
length of the <ul> being enlarged for a split second then shrunk back
to normal. If i can play all animations at the same time the total
length of the <ul> should stay the same. I noticed that, although the
animations are not queued and actually play simultaneously, the first
animate() starts a very little bit earlier because it is called first.
Is there a way to store the animation and play it later, and at the
same time as other stored animations ?
In dojo, there is a neat dojo.fx.combine( [ array, of, animations ] )
function that plays all the animation objects in the array
simultaneously. Is there a way to do this in jquery?
Thanks for the help.
