Cancel all queued jQuery slideUp and slideDown animations

Question

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', this).slideDown(); 
},
onmouseout: function() { 
this.find('.details', this).slideUp(); 
}

However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.

Is there a way to cancel all the queued-up slide animations when the mouse leaves the item's container div?

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

Answer 2

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.

Answer 3

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