jQuery 1.4 Animation Techniques - Index of

Introduction
Once our variables have been defined and initialized, we then execute a short for loop, with
just three iterations. Within this loop we clone the span element we created, give it a class
name for styling purposes, and then append it to the container. Once the three loading bars
have been added to the container, we insert the container after the .
Next we define a function called runLoader. This is the function that will be repeatedly
called by the interval. The function doesn't run until the button is clicked. Within this
function we cache the selector for each of the three individual bars and then run a series
of nested functions.
We first increase the first loading bar to full opacity using the fadeTo() jQuery animation
method. This method takes a string indicating the speed of the animation as its first
argument, the opacity that the element should be faded to as its second argument, and a
callback function as the third argument. The callback function is executed as soon as the
animation ends.
In the callback function, we then fade the first loading bar back to its original opacity of 0.2.
We supply another callback function to this method call, and within this callback function
we animate the second loading bar to full opacity, and then back to its original opacity. The
process is repeated for the third loading bar.
Finally, we use the jQuery toggle() method to add two functions which will be executed
alternately each time the is clicked. In the first function, we show the loader
and then set the interval that repeatedly calls the runLoader() function. In the second
function, we hide the loader and clear the interval.
Pop quiz – basic animation with jQuery
1. Thinking about what we discussed earlier regarding when and when not to use
animations, when would be an appropriate time to use this animation?
a. When there is a browser-intensive operation taking place
b. When there is a delay between something being requested from the server
and the request returning from the server, but where the processing required
by the browser is minimal
c. As an alternative to a Flash animation
d. When animated GIF images are not supported
2. What arguments are used with jQuery's fadeTo() method?
a. An integer representing the ending opacity
b. An object containing configuration options for the animation
[ 16 ]