jquery delay effect

I am developing a mega menu for an ecommerce site. I have uploaded the current version here: http://www.nicklansdell.com/menu/. The menu works great with or without javascript at the moment. What I would really like is to improve the usability when the user have javascript enable by creating a short delay before the menu animates out. My jquery code so far is:

$(function() {
// If no JS CSS menu will still work
$("#menu").removeClass("cssonly");

// Find subnav menus and slide them down
$("#menu li a").hover(function(){ 
    $(this).parent().find("div.subnav").fadeIn(200);
    $(this).parent().hover(function() {
    }, function() {
        // On hovering out slide subnav menus back up
        $(this).parent().find("div.subnav").fadeOut(200);
    })开发者_如何学运维
});

});

Can anyone please help me achieve the delay effect? Many thanks in advance.

I'm assuming you mean that they need to hover over the item for some time before the menu animates. Use the hoverIntent plugin for this instead of hover -- does exactly what I've described.

Delay the hover with setTimeout(), 2nd argument being delay in milliseconds

As suggested by tvanfosson:

        $(document).ready(function(){
        $("#menu li a.link").hoverIntent({
            sensitivity: 3, 
            interval: 200, 
            over: animateOut, 
            timeout: 500, 
            out: animateIn
        });
    }); // close document.ready

    function animateOut(){  
        $(this).addClass("current");
        $(this).parent().find("div.subnav").fadeIn(200);
    }

    function animateIn(){
        $(this).parent().hover(function() {
        }, function() {
        // On hovering out fade subnav menus back in
        $(this).parent().find("div.subnav").fadeOut(200);
        $("#menu li a.link").removeClass("current");
        });
    }

I have used this script for a similar function.

var menu = {}; menu.laatstGeopend = null; menu.timeoutTime = 1000; menu.timeout = null; menu.init = function() {

$(this).addClass("hover"); 
if($(this).hasClass("uitklappen"))
{
 $(this).addClass("uitklappen_hover"); 
}

$(">ul", this).hide().slideDown(300);

// selectbox in <ie7 tonen
if($.browser.msie && $.browser.version < 7) {
 $("select").css({ visibility: 'visible' }); 
}

}, menu.timeoutTime); } ); }