Alex Rivera | Logout

Cancel all queued jQuery slideUp and slideDown animations

Asked 2010-03-02T00:51:56.503
20

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?

javascript jquery animation slideup slidedown
Edit
Report

1 Answer

21

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 don't use these, you'll find moving the mouse quickly and repeatedly across the element will produce buggy results.

answered 2011-07-21T20:03:41.333

Your Answer