Question

var toogleDelay = 500;
var closeTimeout = null;

$(">ul>li", $nav).hover(function () {
    var $this = $(this);
    if(closeTimeout) {
        clearTimeout(closeTimeout);
    }
    var openMenuCallback = function() {
        $this.addClass("hover");
    };
    window.setTimeout(openMenuCallback, toogleDelay);
}, function () {
    var $this = $(this);
    var closeMenuCallback = function() {
        $this.removeClass("hover");
    };
    closeTimeout = window.setTimeout(closeMenuCallback, toogleDelay);
});

I use this snippet to open and close a multidropdown-menu and I want the menu to fade in and out with a 0.5s delay. I also added a cleartimeout to the mouseover part of the jquery hover function, so that the menu does not close if somebody (accidently) leaves the menuarea and enters it again within the 0.5s. This all works fine, but I now have the problem, because there is more than just one dropdown, that the closeTimeout of lets say the first dropdown gets cleared, if I move the mouse from the first directly to the second dropdown and I now have both dropdown-elements open. How must I rewrite the code, so that every dropdown has its own closeTimeout and at the same time I am still able to clear the timeout in the mouseover part of the hover function.

thx
sub

Answer 1

You could store the timer’s id in the element’s data. Something like

var $this = $(this);
var closeMenuCallback = function() {
    $this.removeClass("hover");
    $this.removeData("timerid");
};
var closeTimeout = window.setTimeout(closeMenuCallback, toogleDelay);
$this.data("timerid", closeTimeout);

and then check it with

var $this = $(this);
var closeTimeout = $this.data("timerid");
if(closeTimeout) {
    clearTimeout(closeTimeout);
    $this.removeData("timerid");
}