JQuery_ Novice to Ninja - Earle Castledine [25]
The time span parameter works exactly the same way as the simple animations we saw in Chapter 2: you can pass a number of milliseconds, or one of the strings slow, fast, or normal. Values for CSS properties can be set in pixels, ems, percentages, or points. For example, you could write 100px, 10em, 50%, or 16pt.
Even more excitingly, the values you define can be relative to the element’s current values: all you need to do is specify += or -= in front of the value, and that value will be added to or subtracted from the element’s current property. Let’s use this ability to make our navigation menu swing as we pass our mouse over the menu items using the hover function:
chapter_03/02_relative_css_animation/script.js (excerpt)
$('#navigation li').hover(function() {
$(this).animate({paddingLeft: '+=15px'}, 200);
}, function() {
$(this).animate({paddingLeft: '-=15px'}, 200);
});
Mouse over the navigation menu, and you’ll see the links wobble around nicely.
You can also use animate to achieve fine-grained control over the showing, hiding, and toggling functions we saw in Chapter 2. We simply specify a property’s animation value as show, hide, or toggle rather than a numeric amount:
chapter_03/03_animate_show_hide (excerpt)
$('#disclaimer').animate({
opacity: 'hide',
height: 'hide'
}, 'slow');
It’s terribly satisfying seeing elements animate. As an exercise, try animating every element property you can think of—you’ll stumble on some interesting effects! The animate function also has some powerful advanced options, which we’ll examine in detail over the course of this chapter.
Color Animation
Once you realize how cool the animate function is, you’ll probably want to animate an element’s color. However, animating color is a little bit tricky, because the color values “in between” the start and end colors need to be calculated in a special way. Unlike a height or width value that moves from one value to another in a simple, linear manner, jQuery needs to do some extra math to figure out what color is, say, three-quarters of the way between light blue and orange.
This color-calculating functionality is omitted from the core library. This makes sense when you think about it: most projects have no need for this functionality, so jQuery can keep the size of the core library to a minimum. If you want to animate color, you’re going to need to download the Color Animations plugin.
Important: Using Plugins
The official jQuery plugin repository contains an ever-increasing number of plugins—some more useful than others. You can search for plugins by name, category (such as effects or utilities), or by the rating it’s received from the jQuery community.
Once you’ve found a plugin you’re interested in, download it to a suitable location for your project (most likely the same place as your jQuery source file). It’s a good idea to peruse the readme file or related documentation before you use a plugin, but generally all you need to do is include it in your HTML files, in much the same way as we’ve been including our custom JavaScript file.
How you make use of your newfound functionality varies from plugin to plugin, so you’ll have to consult each plugin’s documentation to put it to the best use.
After downloading and including the Color Animations plugin, you can now animate color properties in your jQuery animation code, just as you would other CSS properties. Let’s gradually highlight our disclaimer message over a period of two seconds as the page loads, to make sure no one misses it:
chapter_03/04_color_animation (excerpt)
$('#disclaimer').animate({'backgroundColor':'#ff9f5f'}, 2000);
See how animating the disclaimer makes it so much more noticeable?
Easing
Easing refers to the acceleration and deceleration that occurs during an animation to