如何添加延遲到jQuery淡出？

我正在爲一個網站設計一個導航欄，並且我試圖展示如何讓每個選項卡上出現的子菜單在光標離開選項卡後保持可見狀態。由於光標離開後立即淡出，因此我無法在子菜單上設置功能。所以我想要做的是在jQuery中向.hover外側引入setTimeout（），但沒有成功。這裏是代碼：如何添加延遲到jQuery淡出？

$('.hovernav').hover(
     function() { 
      $(this).css('background-image', $(this).css('background-image').replace("_o.", "_i.")); 
      tabShowSubnav($(this).attr('id')); 
     }, 
     function() { 
      $(this).css('background-image', $(this).css('background-image').replace("_i.", "_o.")); 
      setTimeout('tabHideSubnav($(this).attr("id"))','2000'); 
     });

我對這個設置缺少什麼？

來源

2009-09-29 b. e. hollenbeck

function() { 
    .... 
    setTimeout('tabHideSubnav($(this).attr("id"))','2000'); 
}

「這個」在內部功能被設定爲obect超時被稱爲上，這是window，不hovernav的當前實例。

最好不要在setTimeout中使用字符串;改用一個函數。然後，您可以訪問封閉範圍中的變量，您可以使用該變量記住傳遞給外部函數的this值。

function() { 
    ... 
    var thisid= this.id; 
    setTimeout(function() { 
     tabHideSubnav(thisid); 
    }, 2000); 
}

（作爲獎勵，該停止的JavaScript不必從你的字符串每次重新編譯的功能。在字符串把代碼幾乎總是假的。）

注意，你可能需要一些更多的邏輯如果鼠標重新進入hovernav，取消hide-subnav。否則，而不是一個煩人的菜單欄，當鼠標離開時仍然保持關閉狀態，如果你在兩秒鐘之前完成了菜單，則會出現一個更令人討厭的菜單欄，即使在您將鼠標懸停在菜單欄上時也會關閉該菜單欄。

來源

2009-09-29 02:35:15 bobince

你試過讓它顯示（）懸停，然後fadeOut（'慢'）鼠標？

http://docs.jquery.com/Effects/fadeOut

Alternatly，你可以.animate（{不透明度：0}，3000）或W/E的量會爲你工作。

還有一個編輯：

你可以有.animate（{不透明度：1}，3000），這隻會拖延已可見元素爲3秒。

來自http://www.learningjquery.com/2007/01/effect-delay-trick

下面是一個簡單的片斷：

JQuery的

$(function(){ 
     $("#HeaderMenu").mouseover(function(){   
      $("#SubMenu").show(); 
     }); 
     $("#HeaderMenu").mouseout(function(){ 
       $("#SubMenu").animate({opacity: 1}, 3000, function(){$(this).hide()}); 
    });

來源

2009-09-29 02:20:24 Omar

只是走一個猜測這裏，但也許「這」超出範圍時，該函數被調用。

來源

2009-09-29 02:21:41 Rich

不能 - 因爲我可以將setTimeout（）移動到tabHideSubnav函數內部，它根本不起作用 - 沒有延遲，沒有褪色。我不確定是否可以從setTimeout（）中調用jQuery。出於某種原因，我也無法讓jQuery插件來處理這個問題。 – 2009-09-29 02:42:21

然後將jQuery內容包裝到另一個函數中，並將它傳遞給解析元素所需的信息。在匿名函數內部，您可以收集解析元素所需的任何信息，這就是您傳遞給包裝函數的內容 – Rich 2009-09-29 02:57:15

如何添加延遲到jQuery淡出？

回答

相關問題