jquery - 如何使用 Jquery Dropdown Menu 延迟隐藏菜单？

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 文档。

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

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