Cancel All Queued Jquery Slideup And Slidedown Animations

I have an interface that makes heavy use of the jQuery slideUp and slideDown effect to expand items in a tri-state kind of way. onmouseover: function() { this.find('.details', thi

Solution 1:

I believe you should be able to just add a .stop() and it'll take care of that for you:

onmouseover: function() { 
this.find('.details', this).stop().slideDown(); 
},
onmouseout: function() { 
this.find('.details', this).stop().slideUp(); 
}

Solution 2:

The answer you really want is a combination of all the other three answers.

$("...").hover(function() {
  $(this).stop(true, true).slideDown();
}, function() {
  $(this).stop(true, true).slideUp();
});

You want the trues in the stop because these clear the pending animation queues. If you dont use these, you'll find moving the mouse quickly and repeatedly across the element will produce buggy results.

Solution 3:

Generally speaking you want to call stop() when starting such an animation:

$("...").hover(function() {
  $(this).stop().slideDown();
}, function() {
  $(this).stop().slideUp();
});

That should be sufficient to avoid long-running animation queues.

You can also use $.clearQueue() to globally clear animations that haven't yet begun.

Also, if you're setting these on mouseover() and mouseout() it is arguably clearer to simply use the hover() event instead.

Solution 4:

It is also much better if you put parameters in stop(), just like this: stop(true,true)...

Solution 5:

In my case, I was also looking for a .stop() solution to the up and down extensive animation queue. However, it still didn't solve, because it wasn't smooth, and it was buggy, making it not to slide down anymore.

Hence, I came with a solution that is not related to cancel queues, but it might help some of you. The solution is about sliding it down or up just when the animation target is not currently being animated.

$("#trigger").on({
    mouseover: function() {
        $("#animationTarget").not(":animated").slideDown();
    },
    mouseleave: function() {
        $("#animationTarget").not(":animated").slideUp();
    }
});