Question

$('#menu > li').hover(function(){
     $(this).find('ul').slideDown();
});

$('#menu > li').mouseleave(function(){

     $(this).find('ul').slideUp();
});

this works fine, but if i hover/leave an <li> item of the menu many times and very fast, once i stop i will see it slide up and down as many times as i hovered,

please watch this sort video capture

http://www.screenr.com/dkes

¿how can that be prevent?

Answer 1

You can use stop to stop the current animation. You could also combine your two event handlers and just use hover (which can take 2 arguments, the first is a function to run on mouseenter, the second a function to run on mouseleave):

$('#menu > li').hover(function() {
    $(this).find('ul').stop(true, true).slideDown();
}, function() {
    $(this).find('ul').stop(true, true).slideUp();
});

The first argument is clearQueue, which will stop the animations queueing up endlessly as you hover repeatedly. The second argument is jumpToEnd, which forces any currently running animation to end before starting a new one.

Here’s a simple example.