添加延迟水平下拉，垂直滑出 - jQuery

当我将鼠标悬停在项目上时，我需要停止从“粘贴”中删除项目，所以我的想法是添加延迟以防止子项目悬停直到你在一段时间内徘徊。添加延迟水平下拉，垂直滑出 - jQuery

我有一个标准的嵌套无序列表设置，样式与CSS和显示/隐藏与jQuery，下面的代码。

除此之外，我想添加最后一级项目上的隐藏延迟。由于第二个ul和最后一个ul之间的“连接”只有10个像素左右，所以您必须非常精确地将鼠标移到其上才能工作，而不是完全隐藏导航。

我该如何A）向第二层ul添加一个延迟以显示和B）向隐藏的第三层ul添加延迟？我没有谈论速度，但增加了物理延迟。

这里是我的代码：

$(function() { 
    $('ul.sub-menu').hide(); 
    $('.sub-menu ul').hide(); 

    $('#menu-navigation li').hover(function(){ 
     $(this).children('ul').slideDown("fast"); 
     }, 
    function(){ 
     $(this).children('ul').hide(); 
    }); 

    $('#menu-navigation ul li').hover(function(){ 
     $(this).children('ul').slideDown("fast"); 
     }, 
    function(){ 
     $(this).children('ul').hide(); 
    }); 

});

来源

2011-08-24 tjcss

设置超时，并将其保存到一个变量，所以你可以取消超时，当你想：

var second_lvl_timer; 
$('#menu-navigation li').hover(function(){ 
    var $this_hover_in = $(this); 
    second_lvl_timer = setTimeout(function() { 
     $this_hover_in.children('ul').slideDown("fast"); 
    }, 500); 
}, 
function(){ 
    var $this_hover_out = $(this); 
    clearTimeout(second_lvl_timer); 
    $this_hover_out.children('ul').hide(); 
});

这会叫暂停，当你鼠标悬停#menu-navigation li元素，如果您在调用定时器之前调用鼠标（上例中为半秒），则超时将被取消。

你可以，但向后第三级做相同的：

var third_lvl_timer; 
$('#menu-navigation ul li').hover(function(){ 
    var $this_hover_in = $(this); 
    clearTimeout(third_level_timer); 
    $this_hover_in.children('ul').slideDown("fast"); 
}, 
function(){ 
    var $this_hover_out = $(this); 
    third_lvl_timer = setTimeout(function() { 
     $this_hover_out.children('ul').hide(); 
    }, 500); 
});

--UPDATE--

我通过在setTimeout的匿名函数改变$(this)语句来创建对变量更新代码盘旋在/外面。这是一个jsfiddle：http://jsfiddle.net/hzPg4/。我注意到，因为第二级悬停不需要超时，所以如果你将鼠标悬停在整个列表上，它会立即滑动并隐藏第三级信息。

来源

2011-08-24 15:50:30 Jasper

谢谢贾斯珀！我试过实现这一点，我想我已经做得正确，但它现在没有显示下拉。这是我的新代码： http://pastebin.com/PcnWgN3m – tjcss

对于第一个问题，你可以使用jquery延迟方法来暂停队列一段时间，但就我而言，即使你不再徘徊，后续方法仍然会运行，所以这不会真的有所帮助。

对于第二个问题，我再次尝试在隐藏调用之前将延迟方法添加到队列中。

$('#menu-navigation li').hover(function(){   
    $(this).children('ul').slideDown("fast");   
    },  
    function(){   
    $(this).children('ul').delay(500).hide();  
});

来源

2011-08-24 15:57:47

添加延迟水平下拉，垂直滑出 - jQuery

回答

相关问题