jquery菜單幻燈片懸停功能加載速度太快

我目前正在製作一個網站，其中包含的菜單導航與僅在fotopunch.com處找到的菜單幾乎相同，而不是指向它的點。無論如何，我寫了代碼使用jQuery/JavaScript的菜單，它的工作原理，但我想知道是否有辦法讓它懸停功能不會生效一段指定的時間。通過這種方式，當您快速懸停在項目上時，不會導致頁面不必要地加載。如果有人有任何建議，我將不勝感激。jquery菜單幻燈片懸停功能加載速度太快

下面是我創建菜單導航的部分代碼的副本。我遇到的另一個問題是，如果您將鼠標懸停在太多導航項上，則箭頭滯後。我希望通過在懸停功能生效之前創建一個等待時間來解決這個問題。

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

來源

2012-06-04 fudge22it

我覺得這事是你可以做的，雖然有可能是一個更好的方法是：

聲明，你把所有的代碼與條件的功能：

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

而且在過功能你做：

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

的想法是：當在設置超時時間，並且達到超時時，檢查是否鼠標懸停，然後做你想做的，最難的POI nt是將引用傳遞給該函數，但是您可以傳遞該項目的名稱，只需從html或rel屬性中獲取它即可。

但是，如果你不需要引用它真的很容易，只需調用函數並檢查元素。

還有另一種選擇，可能是更有趣的你。如果用戶快速更改標籤，事件將被取消，但是如果用戶快速瀏覽一個選項並進行更改，則可以爲所有效果添加延遲，並在此之前添加一個停止（true）出菜單。

來源

2012-06-04 22:53:24

我在我的代碼中添加了一個setTimeout的表單，所以現在當你瀏覽菜單項時，它看起來更光滑一點，但我無法弄清楚如何檢查它是否仍然在給定量的時間，但目前這還不算太大。 – fudge22it

你有沒有試過：「if（$（option）.is（'：hover'））」 –

您的使用delay一些您的通話，如：

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

或者你可以做一些show和hide的具有更長的持續時間：show(2000)爲例。

來源

2012-06-04 22:47:19 lucuma

難道這不會延遲顯示的東西不是真正的懸停事件嗎？ – joehand

有什麼區別..如果你延遲其內部事件的觸發將基本實現相同的事情。如果不使用setTimeout，基本上同樣的事情是每個@ Mario的答案下面的另一個很好的選擇，不知道還有什麼可以做的。 – lucuma

jquery菜單幻燈片懸停功能加載速度太快

回答

相關問題