javascript - jQuery 为菜单导航和可用性添加延迟

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