Jquery Animate without queuing

Jquery Animate without queuing

When an element with the hover event attached is hovered over multiple times, animation will be fired of several times, which is typically undesirable. Queing can be stopped using stop function.

Using .stop(true, false);

Fairly smooth, but animations don't finish if you mouse off too quickly. These are also the default params. Also note that using .stop() on only one or the other doesn't help.

$("#endfalse div").hover(function(){
$(this).stop(true, false).animate({ width: "200px" });
}, function() {
$(this).stop(true, false).animate({ width: "100px" });
});

Using .stop(true, true);

Animations finish, but it's jerky.

$("#endtrue div").hover(function(){
$(this).stop(true, true).animate({ width: "200px" });
}, function() {
$(this).stop(true, true).animate({ width: "100px" });
});

Animated Test

Filter out elements currently being animated before starting new animation

$("#animate-test div").hover(function(){
$(this).filter(':not(:animated)').animate({ width: "200px" });
}, function() {
$(this).animate({ width: "100px" });
});

Dequeue

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();
});
});

Demos at css-tricks