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

70
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS
animation will complete before the second begins; the second will complete before the third begins, and
so on.
The specialEasing option allows developers to attach different easing styles to each CSS property
being animated.
■ Note specialEasing is a new feature in jQuery 1.4 and the brainchild of James Padolsey. He posted a great
example available at http://james.padolsey.com/demos/jquery/easing/easing-jq14.html.
.delay()
The .delay() method is new in jQuery 1.4 and essentially allows developers to pause a script’s execution
for a given number of milliseconds. It provides the ability to run one animation and wait for a bit before
starting the next animation.
To slide up the paragraph with ID bar, wait 3 seconds, and slide it back down, use the following
code:
$("#bar")
.css({
"background":"yellow",
"border":"1px solid black"
})
.slideUp(1000, function(){
console.log("Animation completed!");
})
.delay(3000)
.slideDown(1000, function(){
console.log("Animation completed!");
});
.stop()
To stop an animation, the .stop() method is used. This method accepts two Boolean argument: one to
determine whether the queue should be cleared and another to determine whether the animation
should jump to the end. Both values default to false.
To start an animation, stop the animation, clear the queue, and jump to the end after 200 steps, use
the following:
var count = 0; // Keep track of the current step count
$("#bar")
.css({
"background":"yellow",
"border":"1px solid black"
})
.animate({
"width":"500px"