0

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.

mtwallet
  • 5,040
  • 14
  • 50
  • 74

4 Answers4

1

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.

tvanfosson
  • 524,688
  • 99
  • 697
  • 795
  • @tvanfosson - thats exactly what I want to do. I have had a go at using the hoverIntent plugin as you suggested but it has not worked I have up dated my code above, what am I doing wrong? – mtwallet Feb 15 '10 at 16:47
  • @mtwallet -- can you define "not work" a little more precisely? Are you getting a javascript error? Does it simply not fire as expected? Did you try removing the "hover" code from the `animateIn` function (can't tell if it's just your post or the actual code that's wrong)? – tvanfosson Feb 15 '10 at 16:56
  • I got it working in the end many thanks for your help I appreciate it – mtwallet Feb 15 '10 at 17:40
0

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

Christopher Tokar
  • 11,644
  • 9
  • 38
  • 56
  • @ChrisTek How would I do that? – mtwallet Feb 15 '10 at 16:16
  • 1
    @mtwallet -- do you just want it to delay the animation or delay before firing the animation so that it doesn't trigger unless you actually stay over the trigger element for a bit. Using a simple setTimeout() will not do the latter, you'd need to check if the mouse is still over the trigger element after the timeout expires -- this is essentially what the hoverIntent plugin does. – tvanfosson Feb 15 '10 at 16:27
  • @tvanfosson - thats exactly what I want to do. I have had a go at using the hoverIntent plugin as you suggested but it has not worked I have up dated my code above, what am I doing wrong? – mtwallet Feb 15 '10 at 16:35
0

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");
        });
    }
mtwallet
  • 5,040
  • 14
  • 50
  • 74
0

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

jur
  • 1