Question

I’m using the following simple code to make a drop down menu:

jQuery("#navigation li").hover(
    function(){jQuery(this).children("ul").slideToggle("fast");}, 
    function(){jQuery(this).children("ul").slideToggle("fast");
});

However when I hover the #naviagtion li multiple times really quick, it will keep slideToggling the same amount of times. How do you stop that from doing it.

I was messing around with some sort of flags (isSliding) in the code to see if it’s currently toggling but it seemed really buggy when I used it. (i set the flag before it started sliding and in the callback I set the flag to false again. And before I called the function i just had an if(isSliding) statement.

Example: http://jsfiddle.net/8KxCd/2/

Answer 1

use .stop()

http://jsfiddle.net/genesis/8KxCd/4/

jQuery("#navigation li").hover(

function() {

    jQuery(this).children("ul").stop(true, true).slideToggle("fast");
}, function() {
    jQuery(this).children("ul").stop(true, true).slideToggle("fast");

});