Question

我有一个工作正常的下拉菜单，但我希望如此，如果我将鼠标悬停在菜单上，它不会立即再次隐藏。所以基本上我想要一秒钟的延迟。

我已经阅读过有关setTimeout的内容，但不确定它是否是我需要的内容？

$('#mainnav a').bind('mouseover', function()
{
    $(this).parents('li').children('ul').show();
});

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').hide();
});

Answer 1

setTimeout正是您所需要的。

$('#mainnav a').bind('mouseout', function()
{
    var menu = this;
    setTimeout(function()
    {
        $(menu).parents('li').children('ul').hide();
    }, 1000);
});

Answer 2

对于mouseout，我会在hide（）调用之前添加一个链式动画：

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').animate({opacity:0.99}, 2000).hide();
});

会延迟2秒。

Answer 3

指定“slow”作为要显示和隐藏的参数。来自JQuery Docs。

$('#mainnav a').bind('mouseover', function()
{
    $(this).parents('li').children('ul').show("slow");
});

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').hide("slow");
});

如何使用Jquery下拉菜单延迟隐藏菜单？

3 个答案: