jquery菜单幻灯片悬停功能加载速度太快

我目前正在制作一个网站，其中包含的菜单导航与仅在fotopunch.com处找到的菜单几乎相同，而不是指向它的点。无论如何，我写了代码使用jQuery/JavaScript的菜单，它的工作原理，但我想知道是否有办法让它悬停功能不会生效一段指定的时间。通过这种方式，当您快速悬停在项目上时，不会导致页面不必要地加载。如果有人有任何建议，我将不胜感激。jquery菜单幻灯片悬停功能加载速度太快

下面是我创建菜单导航的部分代码的副本。我遇到的另一个问题是，如果您将鼠标悬停在太多导航项上，则箭头滞后。我希望通过在悬停功能生效之前创建一个等待时间来解决这个问题。

$("div#menu .reps").hover(function() { 

if(current_slide != "reps"){ 
    $(".arrow").animate({"left":"135px"});//move the arrow 
    if(current_slide == "clients"){ 
     $(".clients_display").stop(true, true).fadeOut().hide(); 
     $(".reps_display").fadeIn().show(); 
     current_slide = "reps"; 
    } 
    else if(current_slide == "services"){ 
     $(".services_display").stop(true, true).fadeOut().hide(); 
     $(".reps_display").fadeIn().show(); 
     current_slide = "reps"; 
    } 
    else{ 
     $(".training_display").stop(true, true).fadeOut().hide(); 
     $(".reps_display").fadeIn().show(); 
     current_slide = "reps"; 
    } 
} 
});

来源

2012-06-04 fudge22it

我觉得这事是你可以做的，虽然有可能是一个更好的方法是：

声明，你把所有的代码与条件的功能：

function hoverFunc(option) 
{ 
    if($(option).is(':hover')) 
    { 
     all the code to show the menu 
    } 
}

而且在过功能你做：

$("div#menu .reps").hover(function() { 
    setTimeout("hoverFunc('"+getOptionName+"')",milliseconds); 
});

的想法是：当在设置超时时间，并且达到超时时，检查是否鼠标悬停，然后做你想做的，最难的POI nt是将引用传递给该函数，但是您可以传递该项目的名称，只需从html或rel属性中获取它即可。

但是，如果你不需要引用它真的很容易，只需调用函数并检查元素。

还有另一种选择，可能是更有趣的你。如果用户快速更改标签，事件将被取消，但是如果用户快速浏览一个选项并进行更改，则可以为所有效果添加延迟，并在此之前添加一个停止（true）出菜单。

来源

2012-06-04 22:53:24

我在我的代码中添加了一个setTimeout的表单，所以现在当你浏览菜单项时，它看起来更光滑一点，但我无法弄清楚如何检查它是否仍然在给定量的时间，但目前这还不算太大。 – fudge22it

你有没有试过：“if（$（option）.is（'：hover'））” –

您的使用delay一些您的通话，如：

$(".reps_display").delay(100).fadeIn().show();

或者你可以做一些show和hide的具有更长的持续时间：show(2000)为例。

来源

2012-06-04 22:47:19 lucuma

难道这不会延迟显示的东西不是真正的悬停事件吗？ – joehand

有什么区别..如果你延迟其内部事件的触发将基本实现相同的事情。如果不使用setTimeout，基本上同样的事情是每个@ Mario的答案下面的另一个很好的选择，不知道还有什么可以做的。 – lucuma

jquery菜单幻灯片悬停功能加载速度太快

回答

相关问题