With deferred objects and the powerful pipe() method we can chain animations and run them sequentially and serially. jQuery allows us to do so through the Deferred object's syntax. Let's see the details.
Code structure for sequential animations with deferred objects
Here's the code structure:
$.Deferred(function(dfr) {
dfr.pipe(function() {
return animation1;
}).
pipe(function() {
return animation2;
}).
pipe(function() {
return animationN;
});
}).resolve();
dfr is a reference to the current deferred object. pipe() takes care of chaining animations and run them sequentially.
Practical example
Given the following HTML structure:
<body> <div id="topleft"></div> <div id="topright"></div> <div id="bottomleft"></div> <div id="bottomright"></div> <div id="center"></div> </body>
With the following CSS styles:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
body {
position: relative;
}
#topleft, #topright,
#bottomleft, #bottomright,
#center {
position: absolute;
}
#topleft, #topright,
#bottomleft, #bottomright {
width: 100px;
height: 100px;
z-index: 2;
}
#center {
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background: #ccc;
z-index: 1;
}
#topleft {
top: 0;
left: 0;
background: #00f;
}
#topright {
top: 0;
right: 0;
background: #f00;
}
#bottomleft {
bottom: 0;
left: 0;
background: #800;
}
#bottomright {
bottom: 0;
right: 0;
background: #008;
}
We want the four squares placed on the page sides to move to the center and the centered square to expand to cover the entire page. Here's the jQuery code:
var Animation = new function() {
var center = $('#center');
var coordinates = {
top: center.offset().top,
left: center.offset().left
};
this.run = function() {
setTimeout(function() {
$.Deferred(function(dfr) {
dfr.pipe(function() {
return $('#topleft').animate({
top: coordinates.top,
left: coordinates.left
}, 'slow');
}).
pipe(function() {
return $('#topright').animate({
top: coordinates.top,
left: coordinates.left + 100
}, 'slow');
}).
pipe(function() {
return $('#bottomleft').animate({
top: coordinates.top + 100,
left: coordinates.left
}, 'slow');
}).
pipe(function() {
return $('#bottomright').animate({
top: coordinates.top +100,
left: coordinates.left + 100
}, 'slow');
}).
pipe(function() {
return center.animate({
top: 0,
left: 0,
width: '100%',
height: '100%',
margin: 0
}, 'slow');
});
}).resolve();
}, 2000);
};
}();
$(function() {
Animation.run();
});
As you can see, all animations run sequentially without using the callback function of the animate() method so that our code is much more concise and compact. You can see the demo below.