jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
2. Which method is extended to produce color animations?
Summary
a. The effect() method
b. The show() method
c. The animate() method
d. The switchClass() method
In this chapter we looked at the complete range of new effects which are added by the
jQuery UI library. We looked at how they can be used with the effect() method, or the
show(), hide(), and toggle() methods when necessary. We saw the configuration
arguments that each effect takes, and their default values when used out of the box.
We also covered how jQuery UI extends the animation(), addClass(), and
removeClass() methods, and the switchClass() method that it adds in order
to add the ability to animate between colors and classes.
The key points to take from this chapter include:
jQuery UI together with jQuery can be downloaded using the jQuery UI download
builder, which builds a custom package, complete with a theme if required for you
to download.
jQuery UI adds a total of 14 new predefined effects to our animation toolkit.
The effects are easy to use but highly configurable.
The effect() method is the basic means of specifying an effect, its configuration
options, a duration, and a callback function.
Some of the effects work much better with the show(), hide(), or toggle()
methods and are equally as easy to use with this aspect of the API.
The easing functions are built directly into jQuery UI and can be used by specifying
them as values for the easing configuration option.
jQuery UI also gives us the ability to transition an element's color or class name by
extending some of jQuery's methods and adding the new switchClass() method.
In the next chapter, we'll switch back to jQuery and look at full page animations including
how to animate the page's background image, animating page scroll, and feature animations
that are the main focus of the page.
[ 178 ]