Question

I have a drop down menu that works really well but I want it to stay dropped down so to speak for 500ms after user hovers out of the box.

I tried to use .delay(500) but the animation seems to get stuck and the menu doesn’t disappear.

Here’s my code.

$(function(){
$("ul.dropdown li ul").hide(0);
$("ul.dropdown li").hover(function(){
    $(this).addClass("hover");
    $('ul:first',this).show(0);
}, function(){
    $(this).removeClass("hover");
    $('ul:first',this).delay(500).hide(0);
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append("»");

});

Answer 1

You are using this delay as it would be setTimeout. For what you are doing, i would suggest just to use setTimeout.

By the way, you are hiding it after 500 ms because the user might want to return to it, arent you? If yes, you have to think about, to cancel the hiding function, if the user returns to it. For this, remember the setTimeout using

var myTimeOut = setTimeout(function, 500); clearTimeout(myTimeOut);

My full suggestion to you:

$(function(){
var myTimeout = null;
$("ul.dropdown li ul").hide(0);
$("ul.dropdown li").hover(function(){
    if (myTimeout) clearTimeout(myTimeout);
    $(this).addClass("hover");
    $('ul:first',this).show(0);
}, function(){
     var _thisRef = $(this);
     _thisRef.removeClass("hover");
     myTimeout = setTimeout(function() {
        _thisRef.find("ul:first").hide();
    }, 500);
});

$("ul.dropdown li ul li:has(ul)").find("a:first").append("»");
});