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），這樣，如果用戶快速更改標簽，事件將被取消，但是如果用戶快速通過一個選項並轉到在菜單之外。