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

68
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS
The .animate() method accepts several arguments in two formats: In the first format, the method is
passed a JSON-formatted set of CSS properties to animate as the first argument, an optional duration in
milliseconds for the second argument, an optional easing formula as the third argument, and an
optional callback as the fourth argument. The second format passes a JSON-formatted set of CSS
properties as its first argument and a JSON-formatted set of options as its second.
After setting a background and border style, to animate the height and width of the paragraph
element with ID bar over the span of 5 seconds using the "swing" easing type and logging a message
upon completion, you would use the following for the first format:
$("#bar")
.css({
"background":"yellow",
"border":"1px solid black"
})
.animate({
"width":"500px",
"height":"100px"
},
5000,
"swing",
function(){
console.log("Animation complete!");
});
Upon completion, the paragraph is yellow with a black border and has changed its size to match the
parameters passed (see Figure 2-21).
Figure 2-21. The paragraph after animating its height and width