jQuery为菜单导航，可用性添加延迟

与在superfish中发现的相似，Ive使用它在我的CSS菜单上为悬停效果添加了轻微的延迟。以为我会分享，看看是否有可能会有调整它的建议。jQuery为菜单导航，可用性添加延迟

$('ul#nav li').hover(function(){ 
    var timer = $(this).data('timer'); 
    if(timer) clearTimeout(timer); 
    $(this).addClass('over'); 
},function(){ 
    var li = $(this); 
    li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500)); 
});

来源

2015-02-07 drooh

ul#nav { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
ul#nav li { 
 
\t display: inline; 
 
\t float: left; 
 
\t position: relative; 
 
} 
 
ul#nav li a { 
 
\t display: block; 
 
} 
 
ul#nav li a:hover { 
 

 
} 
 
ul#nav li ul { 
 
\t display: none; 
 
\t position: absolute; 
 
     padding: 0px; 
 
     z-index: 100; /* if slider */ 
 
} 
 
ul#nav li:hover ul { 
 
\t display: block; 
 
} 
 
ul#nav li:hover ul li ul { 
 
\t display: none; 
 
} 
 
ul#nav li ul li:hover ul { 
 
\t display: block; 
 
} 
 
ul#nav li ul li { 
 
\t clear: left; 
 
} 
 
ul#nav li ul li a { 
 

 
}

来源

2015-02-07 03:29:25 drooh

一些快速的想法/思路重新调整：

当你有一个ID选择，它更高效的直来直去的是选择为出发点。此外，查找子元素的效率更高，而不是将所有内容组合在一个选择器中。

我也不会打扰一个计时器，当你可以连锁.delay而不是。我不确定你想要实现什么，所以我发布了下面的例子来给出你如何使用.delay的要点。这是未经测试的，但基本上，在班级出现之前，你有很长时间的延迟，并且在焦点丢失之后再次长时间延迟之后将其删除。您也可以使用slideDown and slideUp或fadeIn and fadeOut以获得更好的效果。

我还添加了一个支票添加类，因为人们可以进出菜单比给定的延迟快得多的部分。这可能可以做更多的思考。

$('#nav').find('li') 
.hover(function() 
{ 
    if (!$(this).hasClass('over')) 
    { 
     $(this).delay(500).addClass('over'); 
    } 
}) 
.blur(function() 
{ 
    $(this).delay(500).removeClass('over'); 
});

来源

2015-02-07 06:30:10

jQuery为菜单导航，可用性添加延迟

回答

相关问题