jQuery 1.4 Animation Techniques - Index of

Have a go hero – extending the plugin
[ 135 ]
Chapter 5
Our plugin currently contains just two transition effects (venetian and strip). Extend the
plugin to include more transition effects of your own devising. The plugin currently creates a
number of transition elements that are the full height of each image.
By wrapping our existing for loop within another for loop and adding some new counter
variables for top position and vertical background-position, it is relatively easy to add
square transition elements in a checker-board style, which opens up the possibility of more
complex, and attractive, transition effects. Do this.
Summary
In this chapter, we looked at some common usages of the animate() method, which is
the means for us to create custom animations in jQuery when the built-in effects are not
enough for our requirements. The method is robust, easy to use, and makes complex
animations trivial.
When simple sliding or fading does not meet our requirements, we can fall back onto the
animate() method in order to craft our own high-quality custom animations. We learnt the
following points about the method:
The animate() method can be used to animate any numeric CSS property (except
colors, for which a separate plugin is required).
The arguments passed into the method may take one of two formats. The first
allows us to pass in an object containing the CSS properties to animate, as well as
separate duration, easing, and callback arguments. The second format allows us to
pass in two objects, the first allowing us to specify the CSS properties to animate
as before, and the second allowing us to specify additional options such as the
duration, easing, and callback. The second option gives us access to some special
arguments not accessible in the first format such as specialEasing and the
step callback.
All CSS properties specified in the first object will be executed simultaneously.
How to achieve animations involving an element's position, or its dimensions
We also looked at how we can extend the jQuery library with brand new functions and
methods in the form of plugins. Plugins are a great way of wrapping up code for easy
deployment and sharing.
Now that we've looked at all of jQuery's animation methods, we're going to move on and
take a look at the additional animation functionality provided by the excellent jQuery UI
library. The next chapter will cover all of the additional effects added by the UI library,
as well as look at class transitioning and smooth color animating.