Question

我正在为电子商务网站开发一个大型菜单。我已在此处上传了当前版本：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);
    })
});

}）;

任何人都可以帮助我实现延迟效果吗？非常感谢提前。

Answer 1

我假设你的意思是他们需要在菜单动画之前将鼠标悬停在项目上一段时间。使用hoverIntent插件代替悬停 - 完全按照我的描述进行操作。

Answer 2

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

Answer 3

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

Answer 4

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

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

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

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

}，menu.timeoutTime）; } ）; }

jquery延迟效应

4 个答案: