Each jQuery animation can be broken down into singular atoms called steps. A step is a fragment of an animation and it allows jQuery to handle all of its effects on elements. Without steps, animations will be always instantaneous and without any possible additional effect, such as delay, easing and so on. jQuery allows us to control such steps using the step() method of the animate() method. Let's see the details.
animate() has also an alternate syntax, which is as follows:
$(element).animate(cssProperties, [options]);
Where options is another object literal containing, among other properties and methods such as complete() and duration, also the step() method, which is invoked on every step. For example:
$(function() {
$('div', 'body').click(function() {
var width = $(this).width();
var height = $(this).height();
$(this).animate({
left: 100
}, {
step: function() {
$(this).width(width -= 1);
$(this).height(height -= 1);
},
complete: function() {
var width2 = $(this).width();
var height2 = $(this).height();
$(this).animate({
left: 0
},
{
step: function() {
$(this).width(width2 += 1);
$(this).height(height2 += 1);
},
duration: 800
}
);
},
duration: 800
});
});
});
The dimensions of the target element have been changed and then restored using the step() method. Each time a step runs, the element's dimensions change by one point.
Further developments
You can use steps to control the animation state of other elements, thus creating parallel animations. For example, when you're animating one element, you can modify the CSS properties of another element incrementally by using the step() method or perform other tasks on other elements. You can also create an internal pointer to keep tracks of the performed steps and log it to the JavaScript console.
You can see the demo below.