JQuery_ Novice to Ninja - Earle Castledine [26]
There are two types of easing available to use in jQuery: linear and swing. Any time you use an animation function in jQuery, you can specify either of these parameters to control the animation’s easing. The difference between them can be seen in Figure 3.1, which shows how a property is adjusted over the period of an animation depending on which easing option you select.
Figure 3.1. jQuery’s easing options
swing easing starts off slowly before gaining speed, then towards the end of the animation it slows down again, nice and gently. Visually, swing easing looks far more natural than linear easing, and jQuery uses it by default if no easing parameter is specified.
The linear easing method has no acceleration or deceleration: animations occur at a constant rate. It looks fairly boring and a bit rigid in most circumstances, but it’s worth giving it a try—it might just be appropriate for your purposes.
As an example, we’ll animate the first paragraph tag so that when clicked, it grows and shrinks; we’ll use linear easing as it grows, and swing easing as it shrinks. The difference is quite subtle, but if you repeat the animations a few times you should be able to distinguish between them; the shrinking animation feels a little bit more natural:
chapter_03/05_easing/script.js (excerpt)
$('p:first').toggle(function() {
$(this).animate({'height':'+=150px'}, 1000, 'linear');
}, function() {
$(this).animate({'height':'-=150px'}, 1000, 'swing');
});
There’s quite a lot of jQuery in this statement, so now might be a good time to pause and make sure you understand everything that’s going on here:
We use a filter with a selector to grab only the first paragraph tag.
A toggle event handler (which executes each passed function on successive clicks) is attached to the paragraph.
Inside the handlers we select this, which refers to the element that triggered the event (in our example, it’s the paragraph itself).
The first handler uses the += format to grow the paragraph’s height by 300 pixels, using the linear easing function.
The second handler uses the -= format to shrink the paragraph’s height by 300 pixels, using the swing easing function.
If you managed to follow along and understand each of these steps, pat yourself on the back! You’re really getting the hang of jQuery!
Advanced Easing
As stated, swing easing provides a much more visually pleasing transition, and is probably adequate for most tasks. But swing and linear easing are just the tip of the iceberg. There is a vast array of easing options beyond these two basic types included in the core jQuery library. Most of these are available in the easing plugin, available from the jQuery plugin repository.
Tip: jQuery UI Includes Several Plugins
The easing library is also included in the effects section of the jQuery UI library, which we’ll be visiting shortly. If you’re starting to suffer from plugin fatigue, then you might like to skip forward to the section called “The jQuery User Interface Library”—this library includes several common plugins, including color animation, class transitions, and easing. By including the jQuery UI library, you’ll avoid needing to include each plugin separately in your pages.
Just download and include the plugin’s JavaScript file in your HTML page, anywhere after the jQuery library. Rather than providing you with new functions, the easing plugin simply gives you access to over 30 new easing options. Explaining what all of these easing functions do would test even the most imaginative writer, so we’ll simply direct your attention to Figure 3.2, where you can see a few of the algorithms represented graphically.
You’ll notice that some of the algorithms move out of the graph area; when animated elements reach this part of the transition, they’ll move past their destination and finally turn back