jQuery 1.4 Animation Techniques - Index of

Download from Wow! eBook
Managing Animations
When called, it will remove the next function in the queue and execute it. It's a simple
method, with few arguments, and is used in a very specific manner. The method may take a
single optional argument which is the name of the queue to execute the next function from:
jQuery(elements).dequeue([queue name]);
The queue name is only required if we are working with a queue other than the default fx
queue. We didn't need to provide the name of the queue in the previous example in the last
section because we replaced the animated element's default fx queue. The dequeue()
method has the same effect as calling the next() function that we used to keep the queue
moving in the queueInsert.html example from the last section.
Time for action – dequeueing functions
Let's change the queueInsert.html page so that it uses the dequeue() method instead
of the next() function to keep the queue moving.
1. Change the code in queueAdd.html so that it appears as follows:
$("#fader").fadeOut(function() {
$(this).queue(function() {
$(this).css("backgroundColor", "green").dequeue();
}).fadeOut();
}).fadeIn().fadeOut().fadeIn();
2. Save this version as dequeue.html.
What just happened?
This time we do not need to pass anything into the callback function passed to the
queue() method. We simply chain the dequeue() method to the after setting its
background-color to green. This has the same effect as before and the green will
fade out at the end of the animation.
Stopping an animation
The stop() method can be used to stop an effect that is currently running on the selected
element. In its simplest form, we may call the method without supplying any additional
arguments, but if necessary we can supply up to two Boolean arguments. The method takes
the following format:
jQuery(elements).stop([clear queue], [jump to end]);
[ 66 ]