CODEWITHSUNDEEP
jquery
H2ONOCK
H2ONOCK

Reputation: 981

How can I prevent jQuery event stacking for my menu system?

I've built a menu that uses a hover function to show children menu items. There are a few parents which have children, and one that has grandchildren. My problem is that if you rapidly hover over the parent menu items a few times and then move the mouse away they will continue to keep on fading in and out.

This is very annoying, how can I stop it?

The jQuery currently looks like this:

$(document).ready(function() {
    $('menu li').hover(function() {
        $(this).children('ul').fadeIn();
    }, function () {
        $(this).children('ul').fadeOut(5000);
    });
});

I've popped it all in a jsfiddle here: http://jsfiddle.net/8gsb5/

Any help would be greatly appreciated, thanks.

Upvotes: 2

Views: 31

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try .stop(true,true)

$(document).ready(function () {
    $('menu li').hover(function () {
        $(this).children('ul').stop(true, true).fadeIn();
    }, function () {
        $(this).children('ul').stop(true, true).fadeOut(5000);
    });
});

fiddle Demo

Upvotes: 2

Related Questions