jQuery 1.4 Animation Techniques - Index of

[ 67 ]
Chapter 3
The first argument clears the element's queue and the second forces the final state of the
effect to be applied.
The stop() method behaves differently depending on whether there are any additional
effects in the fx queue.
When the method is called and there are no functions in the queue, any effects that are
currently running on the selected element(s) will simply stop and the element will remain in
whatever state it reached during the animation.
If there are several functions in the queue however, the current animation will be stopped
in whatever state it is in at the time, but then the remaining functions in the queue will
be executed.
Take the following code for example:
$("#fader").fadeOut(5000).fadeIn().fadeOut().fadeIn();
$("#stop").click(function() {
$("#fader").stop();
});
If the stop element is clicked while the first effect is running, the fader element will flicker as
the remaining effects are applied one after the other.
To prevent the queued functions being executed, we can supply true as the value of the first
argument. To force the element into its final state, we can also supply true as the value of
the second argument. Both arguments default to false.
The stop() method can be really useful for preventing animation build-up. If an animation
is triggered by clicking a button for example and the button is clicked repeatedly, the
animation can run multiple times. Usually this behavior is undesirable and can be prevented
using the stop() method.
To see the differences between each variation of the stop() method, see
the stopTest.html file in the accompanying code download for this book.