CODEWITHSUNDEEP
jquerydelaytimedelay
mtwallet
mtwallet

Reputation: 5096

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.

Upvotes: 0

Views: 871

Answers (4)

jur
jur

Reputation: 1

I have used this script for a similar function.

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

$("#menu>li").hover( function() {
// als laatstegeopend dezelfde is als de huidige, dan de timeout verwijderen if($(this).hasClass("hover")) { clearTimeout(menu.timeout); } // nieuwe uitschuiven else { $("#menu>li>ul").hide(); $("#menu>li").not(this).removeClass("hover").removeClass("uitklappen_hover");

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

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

}

// selectbox in

clearTimeout(menu.timeout); menu.timeout = setTimeout(function() { $(menu.laatstGeopend).removeClass("hover uitklappen_hover"); 

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

}, menu.timeoutTime); } ); }

Upvotes: 0

mtwallet
mtwallet

Reputation: 5096

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");
        });
    }

Upvotes: 0

Christopher Tokar
Christopher Tokar

Reputation: 11917

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

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532605

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.

Upvotes: 1

Related Questions