jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
For a full list of the easing functions available with jQuery (either via the
easing plugin, or jQuery UI) see the table in the easing section in Chapter 4,
Sliding Animations.
Time for action – adding easing to effects
To use easing, all we need to do is include the easing function name as a configuration
option. For example, to add easing to the blind.html example that we looked at earlier,
we could change the JavaScript so that it appeared as follows:
$("#window").click(function() {
$("#blind").toggle("blind", { easing: "easeOutBounce" });
});
What just happened?
We use the configuration option easing, with the name of the easing function as a string
supplied as the value of the option. Any of the easing functions can be used by referencing
their name in this way.
Color animations
As well as the complete range of easing functions, the effects core file also gives us the ability
to attractively and smoothly animate between different colors. Several CSS properties can
be animated including the color, background-color, border-color, and outlinecolor.
jQuery UI extends jQuery's animate() method to achieve color animations, so the syntax to
implement it is the same as using animate(). For any other purpose, we just need to target
one of the above CSS properties and supply the new color value as a string, hexadecimal
(#xxxxxx), or RGB (rgb(xxx, xxx, xxx)) value. Let's look at a basic example.
Time for action – animating between colors
In this example, we'll use color animations to show that a form field has been left empty.
1. In a fresh copy of the template file, use the following elements in the of the
page:
Search
[ 174 ]