Question

The code below is basically what I want to do, which I understand is incorrect code.

So for a dropdown menu, I want to hide it with a delay. The problem is, when I hover onto another menu-item before the hide-delay is finished, it overrides the next handlerIn.

So is there a simple way to clear the setTimeout queue on the next hover()?

Again, the incorrect code below is just for explaining.

$('nav > ul > li').hover(function() {
    clearTimeout(menuHide);
    $(this).find('ul').show();
}, function() {
    var menuHide = setTimeout(function() {
        $(this).find('ul').hide();
    }, 150);
});

UPDATE: Seems like clearInterval() is not what I’m looking for, because I still want to let it complete, instead of abort it.

Is there a completeInterval() by any chance? 🙂

Answer 1

Currently, your hover event has no reference to menuHide so it must be declared beforehand.

var menuHide;

$('nav > ul > li').hover(function() {
    clearTimeout(menuHide);
    $(this).find('ul').show();
}, function() {
    menuHide = setTimeout(function() {
        $(this).find('ul').hide();
    }, 150);
});

EDIT

After some collaboration in the comments section, we determined that putting the code inside of the complete portion of the animate method was the way to go:

.animate( properties [, duration ] [, easing ] [, complete ] )