Question

I have a simple jQuery script. This is the script:

var menu = $('#nav .menu');

$('li', menu).mouseenter(function() {
    $(this).find('.sub-menu').slideDown();
}).mouseleave(function(){
    $(this).find('.sub-menu').slideUp();
});

This script open a submenu. But i have a problem with this script. If you go over it quickly. The script launch every time. When you go over the item verry quickly. The menu open a lot of times. How can i fix this?

Thank for help

Answer 1

use jQuery’s .stop() function. Passing in the necessary arguments ex. .stop(true,true),.stop(true)

$('li', menu).mouseenter(function() {
    $(this).find('.sub-menu').stop().slideDown();
}).mouseleave(function(){
    $(this).find('.sub-menu').stop().slideUp();
});

or passing this as the context seems a little neater to me – it does the same thing as .find()

$('li', menu).mouseenter(function() {
    $('.sub-menu',this).stop().slideDown();
}).mouseleave(function(){
    $('.sub-menu',this).stop().slideUp();
});