How do I stop an effect in jQuery

Question

I have a page that uses

$(id).show("highlight", {}, 2000);

to highlight an element when I start a ajax request, that might fail so that I want to use something like

$(id).show("highlight", {color: "#FF0000"}, 2000);

in the error handler. The problem is that if the first highlight haven't finished, the second is placed in a queue and wont run until the first is ready. Hence the question: Can I somehow stop the first effect?

Answer 1

From the jQuery docs:

http://docs.jquery.com/Effects/stop

Stop the currently-running animation on the matched elements....

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.

If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When .stop() is called, the next animation in the queue begins immediately. If the clearQueue parameter is provided with a value of true, then the rest of the animations in the queue are removed and never run.

If the jumpToEnd argument is provided with a value of true, the current animation stops, but the element is immediately given its target values for each CSS property. In our above .slideUp() example, the element would be immediately hidden. The callback function is then immediately called, if provided...

Answer 2

I listed this as a comment for the accepted answer, but I thought it would be a good idea to post it as a standalone answer as it seems to be helping some people having problems with .stop()

---

FYI - I was looking for this answer as well (trying to stop a Pulsate Effect), but I did have a .stop() in my code.

After reviewing the docs, I needed .stop(true, true)

Answer 3

.stop(true,true) will freeze the effect so if it's invisible at the time then it remains invisible. This could be a problem if you are using the pulsate effect.

$('#identifier').effect("pulsate", {times:5}, 1000);

To get around this I added

$('#identifier').stop(true, true).effect("pulsate", { times: 1 }, 1);