开发者

jquery delay effect

开发者 https://www.devze.com 2022-12-20 01:05 出处:网络
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 wo

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() {

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

0

精彩评论

暂无评论...
验证码 换一张
取 消