Question

类似于在superfish中发现的东西，我用它来为我的CSS菜单上的悬停效果添加一点延迟。以为我会分享，看看是否有可能有调整它的建议。

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

Answer 1

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

由于你有一个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');
});

Answer 2

＆＃13;

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

＆＃13;

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

2 个答案: