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

jquery menu slideshow hover function loading too fast

本文关键字：加载 功能 悬停 菜单 幻灯片 jQuery      更新时间：2023-09-26

我目前正在制作一个网站，其中包含一个菜单导航，该菜单导航几乎与在 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";
    }
}
});

我认为您可以做的事情，尽管可能有更好的方法是：

声明一个函数，您可以在其中放置带有条件的所有代码：

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），这样，如果用户快速更改标签，事件将被取消，但如果用户快速完成选项并退出菜单，它将发生变化。

您可以在某些调用中使用delay，例如：

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

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

相关文章：