Chaining jQuery animations is rather simple. The problems you may encounter are only related to the amount of time each animation has to wait before moving to the next element. Fortunately, jQuery provides the delay() method to deal with such situations. Let's see how to create chained animations.
We have the following element set:
<div id="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
With the following styles:
#wrapper {
width: 315px;
overflow: hidden;
margin: 2em auto;
}
div.box {
width: 100px;
height: 100px;
margin: 0 5px 5px 0;
float: left;
background: #333;
}
We want to sequentially change the opacity of each box. Here's the jQuery code:
$(function() {
var time = 0;
$('div.box', document.getElementById('wrapper')).each(function() {
$(this).delay(time).animate({opacity: 0.5}, 1000);
time += 1000;
});
});
We've simply set a counter which is incremented by 1000 (milliseconds) each time the loop runs. Then we've used this counter with the delay() method, thus creating the effect of chained animations.
You can see the demo below.