jQuery 1.4 Animation Techniques - Index of

[ 91 ]
Chapter 4
Easing is a great effect that can be added with the addition of an 8 KB plugin (3.51 KB when
minified and with the license moved to an external file) and a very minor tweak to our code.
Using it is simple, but its effects can be enormous, transforming a monotonous or otherwise
boring animation into one filled with impact and interest.
Using an object literal to add easing
We can also change the format of the arguments we pass into the predefined animation
methods in order to use easing. Prior to the easing argument being added to the animation
methods (fadeIn(), slideDown(), and so on) in version 1.4.3 of jQuery, this was the defacto
means of using easing with animation methods.
Instead of providing string or numerical arguments (or a callback function), we can provide
an object literal where each key refers to the duration, the easing type, and optionally a
callback to call when the animation is complete. The usage then becomes as follows:
jQuery(elements).slideDown({
duration: [duration],
easing: [easing],
complete: [callback]
});
Time for action – using the alternative argument format
This time we'll use the alternative syntax for supplying an easing function.
1. Change the call to the slideDown() method in slideEasing.html so that it
appears as follows:
$(this).addClass("on").next().slideDown({
easing: "easeOutBounce"
});
2. Save this version of the file as slideEasingObject.html.
What just happened?
By supplying an object literal as the first argument to the slideDown() method, we are
able to make use of the easing types provided by the plugin in an alternative syntax. In this
example, we omit the duration and complete keys of the object and supply only the
name of the easing type as a string.