如何在一些毫秒后提高悬停事件？

我创建了一个菜单，我通过悬停事件显示和隐藏子菜单，如下面的代码如何在一些毫秒后提高悬停事件？

是任何方式，子菜单显示或隐藏后，他们的一些毫秒鼠标留在？

$(" #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

如何在一些毫秒后提高悬停事件？

回答

相关问题