jQuery: animate elements one after another

animate-elements-one-after-another.md

Animate elements one by one

We have these divs with .a class.

<div class="a b">d</div>    
<div class="a c">d</div>    
<div class="a d">d</div>    
<div class="a e">d</div>    
<div class="a f">d</div>    
<div class="a g">d</div>    
<div class="a h">d</div>    
<div class="a i">d</div>    
<div class="a j">d</div>    
<div class="a k">d</div>    
<div class="a l">d</div>    
<div class="a m">d</div>    

We want animate them one after another.

// start animation
nextAnim($('.a'));

function nextAnim(elems)
{
	// if we have element, animate it
	elems.eq(0).animate({'left': 50}, function()
	{
		nextAnim(elems.slice(1));  // slice off the first element
	});
}