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

时间:2011-08-24 15:34:49

标签: 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();
    }); 

});

2 个答案:

答案 0 :(得分:1)

设置超时并将其保存到变量,以便您可以在需要时取消超时:

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元素上时,这将调用超时,如果在调用计时器之前使用mouseout(在上例中为半秒),则会取消超时。

您可以为第三级做同样但倒退:

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)语句更改为在hovering in / out中创建的变量来更新代码。这是一个jsfiddle:http://jsfiddle.net/hzPg4/。我注意到,由于第二级悬停不需要超时,如果您将鼠标悬停在整个列表中,则会立即向上滑动并隐藏第三级信息。

答案 1 :(得分:0)

对于第一个问题,您可以使用jquery延迟方法暂停队列一段时间,但就我现在而言,即使您不再处于悬停状态,后续方法仍将继续运行,因此这不会对您有所帮助。 / p>

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

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