jQuery 1.4 Animation Techniques - Index of

Custom Animations
In the callback function for each animation, we check whether i is equal to the length
of the collection of transition elements, and if it is we remove the overlay and show the
previous and next links once more.
The second transition removes the old image one strip at a time. To do this, we use a simple
counter variable and a standard JavaScript function. We can't use the each() method this
time, or all of the transition elements will slide down together, but we want each one to slide
down on its own.
Within the function, we animate the current transition element's height to 0 and set a rather
low duration so that it happens fairly quickly. If the animation is too slow it spoils the effect.
In the callback function, we check whether our counter variable is equal to the number of
transition elements, and if so remove the overlay and show the links again. If the counter
hasn't reached the last element at this point, we increment the counter variable and call
the function once more.
Save this file as jquery.tranzify.js in the js folder. This is the standard naming
convention for jQuery plugins and should be adhered to.
Using the plugin
To use the plugin, we just call it like we would call any other jQuery method, like this:
$("#frame").tranzify();
In this form, the default properties will be used. If we wanted to change one of the
properties, we just supply a configuration object, such as this:
$("#frame").tranzify({
transitionType: "strip"
});
The default animation should run something like this:
[ 132 ]