0

我正在为电子商务网站开发一个大型菜单。我在这里上传了当前版本：http: //www.nicklansdell.com/menu/。目前，无论是否使用 javascript，该菜单都可以很好地工作。我真正想要的是通过在菜单动画出来之前创建一个短暂的延迟来提高用户启用 javascript 时的可用性。到目前为止，我的 jquery 代码是：

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

});

谁能帮我实现延迟效果？提前谢谢了。

4

4 回答 4

1

我假设您的意思是他们需要在菜单动画之前将鼠标悬停在该项目上一段时间。为此使用hoverIntent插件而不是悬停 - 完全符合我的描述。

于 2010-02-15T16:08:56.967 回答
0

使用 setTimeout() 延迟悬停，第二个参数是以毫秒为单位的延迟

于 2010-02-15T16:10:40.437 回答
0

正如 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");
        });
    }
于 2010-02-15T17:05:31.713 回答
0

我已将此脚本用于类似的功能。

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

}，菜单。超时时间）；}); }

于 2010-02-16T11:43:51.767 回答