jquery animate li in order

[BaSk]

I have a ul and I would like to animate each li in descending order, and I'm having no luck on this.

my current code it,

function menuItemsIn(){

		$(".ac_menu ul li").each(function(){
		
			$(this).animate({marginTop : '0px', opacity : '100'}, {duration : 'slow', easing : 'easeInBack'}).delay(200);
		
		});
	
	}

It animating all the li's together, and what I want it to do is. Animate one li, then the next, and so on.

Any help would be nice.

Thanks
-BaSk

[Airshow]

BaSk,

To make the animations happen in cascade, not in parallel, you need to use a callback function as one of the arguments to animate(). By having the callback function perform a recursive call to your outer function menuItemsIn , you get a chain reaction that animates each list item in turn.

This may not be exactly what you want but you should be able to make the necessary changes within this general pattern:

function menuItemsIn($list, n) {
	$list.eq(n).animate({marginTop:'0px', opacity:'100'}, 'slow', 'easeInBack', function() {
		if(n < $list.length-1) { menuItemsIn($list, n+1) };//note the test to ensure we don't end with an error.
	});
}

With the jQuery selection in the initial call (not inside menuItemsIn ), it only needs to be performed once for the whole process, and also makes menuItemsIn reusable for other menus:

menuItemsIn($(".ac_menu ul li"), 0);//start the chain reaction with the first list item.

Airshow

[Airshow]

Just played with this a bit more and ended up with a more pleasing effect like this:

function menuItemsIn($list, n) {
	$list.eq(n).animate({marginTop:0, opacity:0.4}, 600, 'easeOutBack', function() {
		$(this).animate({opacity:1.0}, 600);
		if(n < $list.length-1) { menuItemsIn($list, n+1) };
	});
}

having intialised the list with:

$(".ac_menu ul li").css({marginTop:'-2em', opacity:0});

Airshow