jQuery 1.4 Animation Techniques - Index of

[ 57 ]
Chapter 3
A custom queue that we create ourselves will not run automatically and we must ensure
that each item in the queue is executed one after the other. jQuery provides several ways of
doing this including the dequeue() method, which executes the next function in the queue,
and a callback function that we can pass into functions in the queue. We'll look at both of
these techniques later in the chapter.
Viewing the queue
To view the queue we simply call the queue() method; no arguments are required but we
can optionally supply the queue name if it differs from the default fx. When the method
is called, it returns an array containing the remaining functions in the queue. The queue()
method may be used in the following form:
jQuery(elements).queue([queue name], [new queue], [callback]);
In addition to the name of the queue, we can also supply either a new queue, or a single
callback function. The new queue, if supplied, should take the form of an array of functions.
The new queue will replace the existing queue entirely. Passing an empty array to the
queue() method will clear the queue. A callback passed to the queue() method will be
added to the end of the queue and executed last after the functions originally in the queue.
A common use of the queue() method is to look at the length property of the returned
array to determine how many functions are left to run; but if we need to, we can also look at
each function individually by calling the toString() JavaScript function on any item in the
array (except for item 0 which will simply display the string inprogress).
Most functions in the returned array are function literals, however, the "next" item in the
queue is not available via the queue() method. The contents of item 0 in the default fx
queue will always be the string inprogress as this is the animation currently being run.
Time for action - viewing the queue
Let's look at a basic example of the use of the queue() method and the type of results we
can expect to obtain.
1. In the of our template file add the following code:
#fader { width:100px; height:100px; background-color:#000; }