Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Using the second format, the code would change as follows:
$("#bar")
.css({
"background":"yellow",
"border":"1px solid black"
})
.animate({
"width":"500px",
"height":"100px"
},
{
"duration":5000,
"easing":"swing",
"complete":function(){
console.log("Animation complete!");
}
});
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS
This produces an identical result. The second format of .animate() provides for additional options
as well. To complete the same action using all available options, your code might look like this:
$("#bar")
.css({
"background":"yellow",
"border":"1px solid black"
})
.animate({
"width":"500px",
"height":"100px"
},
{
"duration":5000,
"easing":"swing",
"complete":function(){
console.log("Animation complete!");
},
"step":function(){
console.log("Step completed!");
},
"queue":true,
"specialEasing":{
"width":"linear"
}
});
The step option allows developers to create a callback function to be fired after each step of the
animation. This is each time the property is adjusted, so the preceding example ends up outputting quite
a few log messages of "Step completed!".
The queue option tells the animation whether or not it should be added to the current queue, that is,
the order in which animations have been called. If multiple animations are called and queued, the first
69