如何在一些毫秒後提高懸停事件？

我創建了一個菜單，我通過懸停事件顯示和隱藏子菜單，如下面的代碼如何在一些毫秒後提高懸停事件？

是任何方式，子菜單顯示或隱藏後，他們的一些毫秒鼠標留在？

$(" #nav li").hover(function(){ 
     $(this).find('ul:first').show(600); 

     },function(){ 
     $(this).find('ul:first').fadeOut(400); 
     }); 
}

來源

2010-03-07 ulduz114

您可能希望在handlerIn功能檢查出hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html

來源

2010-03-07 22:04:56

設置一個計時器hover()。清除handlerOut中的計時器。

var timeoutId = { }; 

function show(id) { 
    $("#"+id).find('ul:first').show(600); 
    timeoutId[id]= null; 
} 

function init() { 
     $("#nav > li").hover(
      function(){ 
       var id = $(this).attr('id'); 
       timeoutId[id]= setTimeout(function(){show(id);}, 800); 
      }, 
      function(){ 
       var id = $(this).attr('id'); 
       if (typeof timeoutId[id] != "undefined" && timeoutId[id]!=null) { 
        clearTimeout(timeoutId[id]); 
        timeoutId[id]= null; 
       } 
       $(this).find('ul:first').fadeOut(400); 
      } 
    ); 
    } 

    $(document).ready(init);

來源

2010-03-07 22:38:30 Cheeso

這裏有一個更簡潔的版本比Cheeso's：

$(function() { 
    $("#Trigger").hover(
     function() { 
      $("#Target").delay(800).fadeIn(0); 
     }, 
     function() { 
      $("#Target").clearQueue().fadeOut(400); 
     } 
    ); 
});

delay會導致#Target不褪色爲800毫秒。當您懸停時（無論#Target已完全顯示還是等待由於delay而顯示），則調用clearQueue。如果在800毫秒內發生，則從隊列中清除delay和fadeIn。否則，隊列將已經爲空。無論哪種情況，#Target都會立即淡出。

（請注意，你需要使用fadeIn(0)而不是show因爲show不是一件那張FX隊列，因此delay不會有任何效果。）

如果你也想拖延fadeOut， delay需要去後clearQueue，而不是之前。

更新

我注意到，如果，而不是fadeIn(0)，您使用fadeIn(500)，但那些在500ms內徘徊了，然後在隨後的懸停接管，#Target只會淡入不透明度，這是以前允許淡入。有人知道這是否是有意的行爲？

來源

2010-03-07 23:36:29 Lobstrosity

如何在一些毫秒後提高懸停事件？

回答

相關問題