0

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

2 回答 2

0

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

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

或者你可以制作一些show并且hide有更长的持续时间： show(2000)例如。

于 2012-06-04T22:47:19.317 回答
0

我认为你可以做的事情，虽然可能有更好的方法是：

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

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

在你做的 over 功能上：

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

想法是：当结束时，设置一个超时，当超时时，检查鼠标是否结束然后做任何你想做的事，最难的一点是传递对函数的引用，但你可以传递函数的名称item 只是从 html 或 rel 属性中获取它。

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

还有另一种可能对您来说更有趣的选择。您可以为所有效果添加延迟并在之前添加一个 stop(true)，这样，如果用户快速更改标签，事件将被取消，但如果用户快速通过选项并继续，它会更改菜单外。

于 2012-06-04T22:53:24.093 回答