jQuery stop(true, true) to jump to end of all animations in queue

Question

I have been using jQuery\'s stop(true, true) method to clear running animations so the next one starts immediately. I noticed that the first parameter, clearQ

Answer 1

jQuery 1.9 introduced the .finish() method, which achieves exactly that.

Answer 2

I also notice from the documentation of the .finish() method in jQuery 1.9 that

Animations may be stopped globally by setting the property $.fx.off 
to true. When this is done, all animation methods will immediately 
set elements to their final state when called, rather than displaying an effect.

There is also a nice demo of the various methods on the .finish() documentation page.

Answer 3

Chaining multiple stop(false, true) makes sense. Instead of hard-coding a fixed number of chained calls, you could check the queue length:

while ($(this).queue().length) {
    $(this).stop(false, true);
}

Demo: http://jsfiddle.net/AB33X/

Answer 4

Test for presence of class (set upon hover and removed on mouseOut animate callback) before staring new animation. When new animation does start, dequeue.

$("div").hover(function(){
    if (!$(this).hasClass('animated')) {
        $(this).dequeue().stop().animate({ width: "200px" });
    }
}, function() {
    $(this).addClass('animated').animate({ width: "100px" }, "normal", "linear", function() {
        $(this).removeClass('animated').dequeue();
    });
});