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
    }
}

关于你的过度功能：

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

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

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

还有另一种选择可能对你更有趣。您可以为所有效果添加延迟并在之前添加一个停止（true），这样，如果用户快速更改标记，事件将被取消，但如果用户快速通过选项，它将会更改菜单外面。

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

2 个答案: