jQuery菜单的幻灯片悬停功能加载太快

Question

我目前正在制作一个包含菜单导航的网站，该菜单导航与fotopunch.com上的菜单导航几乎完全相同，而不是指向上方。 无论如何，我使用菜单的jquery / javascript编写了代码，它可以工作，但是我想知道是否有一种方法可以使悬停功能在指定的时间内不起作用。 这样，当您将鼠标悬停在某个项目上时，不会导致页面不必要地加载。 如果有人有任何建议，我将不胜感激。

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

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

Answer 1

您在某些通话中使用delay ，例如：

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

或者，您可以使某些show和hide的持续时间更长：例如show(2000) 。

Answer 2

我认为您可以执行一些操作，尽管可能有更好的方法是：

声明一个函数，在其中将所有代码置于条件下：

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

然后在over函数上执行以下操作：

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

这个想法是：结束时，设置一个超时，当超时时，检查鼠标是否结束，然后做任何您想做的事情，最困难的一点是将引用传递给该函数，但是您可以传递该函数的名称。只是从html或rel属性获取的项目。

但是，如果您不需要引用，那确实很容易，只需调用函数并检查元素即可。

---

还有另一个选项可能对您来说更有趣。 您可以在所有效果上添加延迟，然后在之前添加stop（true），这样，如果用户快速更改标签，事件将被取消，但是如果用户快速通过一个选项并转到在菜单之外。