On 14 Feb, 15:04, spaceage <[EMAIL PROTECTED]> wrote: > andrea--thanks so much for this helpful tip.
you're welcome :) > I would have expected some form of .each perhaps with an incrementing > variable to use as the "multiplier" for determining the top value for > each <li>. If I read this correctly, it looks like the callback on > the animate function is recursing until the end of the <li>s? yes, it is. Sure you could write this code: var spacing = 30; $('li').each(function(index){ $(this).animate({top: (index*spacing)}); }); which is much concise, but doesn't achieve the same result. using each() is like doing, say we have four li's $('li:eq(0)').animate({top: (0)}); $('li:eq(1)').animate({top: (30)}); $('li:eq(2)').animate({top: (60)}); $('li:eq(3)').animate({top: (90)}); this code fires the four animations almost at the same time. the result is that the li's come up all at the same time, as if we had done $('ul').animate(.... and that's not as pretty. to make the li's slide up separately, we must animate the first, and then animate the next, when the first has reached the top. this is done in jQuery by using a callback function that can be passed to animate() as the last argument, and that is execued when the animation is complete. something like this $('li:first').animate({top:0}, function(){ $('li:eq(2)').animate({top:30}, function(){ and so on... that's why the function I wrote is recursive :)