Tracking jQuery animations is not enough. Often we want also to concatenate one animation with another, thus creating an animation chain that will lead to more interesting effects. jQuery allows for this behavior by arming the animate() method with a callback function to be invoked when an animation is complete. Using this function we can attach a second animation to the first one, and so on. For example:
$(document).ready(function() {
var paddingCounter = $('#test li:first').css('padding');
$('#test li:first').addClass('test').click(function() {
paddingCounter += 1;
var thisWidth = $(this).width();
$(this).animate({
width: thisWidth / 2
}, 'slow', function() {
var thisOpacity = $(this).css('opacity');
$(this).animate({
opacity: thisOpacity - 0.3
}, 'slow', function() {
var thisPadding = $(this).css('padding');
$(this).animate({
padding: (paddingCounter + 0.1) / 2
}, 'slow');
});
});
});
});
Three sequential animations that change the padding, width and opacity of a given element in a continuous process that involves also the use of tracking in order to get values that will be automatically incremented each time a user activates the trigger action.