(^224) ❘ CHAPTER 8 ANIMATION AND EASING EFFECTS
an object, a bounce easing is apparent as the width becomes smaller, then snaps larger, and then snaps
smaller again, giving the appearance of bouncing. The easing in this case applies an algorithm that
controls the animation of width over time, with points in time where the animation temporarily goes
backward and then forward again until the duration is met to produce the appearance of bouncing.
These easing effects are all prepackaged into presets that you can utilize in your scripts by calling
a method in jQuery with an argument or option that references the name of the easing preset. Not
all the easing presets are included in the default jQuery download; only 'linear' and 'swing' are
included. Additional easings must be downloaded separately from the jQuery UI website at http://www.
jqueryui.com/download/. The examples in this chapter include jQuery UI with all optional easings
and UI components included. The jQuery UI fi le is included in the source code materials download
for this book available for free from http://www.wrox.com/go/webdevwithjquery and is named jQueryUI.js.
Potential animations include fading, sliding, swinging, and a whole suite of additional effects. In addi-
tion to the animations built in and included with jQuery, you can create your own completely custom
animations using jQuery’s animate() method, as discussed in the section “Custom Animation.”
You can also supply a callback function to any of jQuery’s animation methods, which is executed
when animation completes. And if that doesn’t provide enough fl exibility, you can also supply a con-
fi guration object that supports a comprehensive list of options that cover additional callback func-
tion scenarios, as well as tweaking all aspects of the animation.
The following example demonstrates how to animate show and hide element transitions using
jQuery’s show(), hide(), and toggle() methods. The toggle() method, as the name implies, encom-
passes both show() and hide() functionality in a single method, switching back and forth depending
on whether the element is visible when animation commences.
<!DOCTYPE HTML>
Integer Feugiat Fringilla
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut vestibulum ornare augue. Fusce non purus vel libero
mattis aliquet. Vivamus interdum consequat risus. Integer
feugiat fringilla est. Vivamus libero. Vestibulum
imperdiet arcu vitae nunc. Nunc est velit, varius sed,
faucibus quis.