The traditional approach
In the traditional approach to animations, we use nested callback functions to create sequential animations:
$('#test').animate({
left: 500
}, 1000, function() {
$(this).animate({
top: 100
}, 1000, function() {
$(this).animate({
left: 0
}, 1000, function() {
$(this).animate({
top: 0;
}, 1000);
});
});
});
As you can see, code readability is seriously compromised. We can use deferred objects instead.
Using deferred objects
Let's create an object where each method is a separate animation:
var Animator = {
element: '#test',
moveTo: function(offset) {
offset = offset || 0;
$(Animator.element).animate({
left: offset
}, 1000);
},
moveDown: function() {
$(Animator.element).animate({
top: 100
}, 1000);
},
moveUp: function() {
$(Animator.element).animate({
top: 0
}, 1000);
}
};
Then we can use the $.when() and then() methods of deferred objects with the new object's methods:
$('#test').click(function() {
$.when(Animator.moveTo(500), Animator.moveDown())
.then(function() {
Animator.moveTo();
Animator.moveUp();
});
});
Now our code is much more readable and maintainable and the final effect is exactly what we wanted: chained animations. You can see the demo below.