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 :)
