CODEWITHSUNDEEP
javascriptjqueryclickmouseevent
Mike Vierwind
Mike Vierwind

Reputation: 1520

Simple jquery click event script, its a loop

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

Upvotes: 1

Views: 158

Answers (2)

wirey00
wirey00

Reputation: 33661

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

Upvotes: 3

Jai
Jai

Reputation: 74738

Use this way:

$('#nav .menu li').hover(function() {
   $('.submenu').stop().slideDown();
}, function(){
   $('.submenu').stop().slideUp();
});

Upvotes: 0

Related Questions