Как отложить скрытие меню с помощью раскрывающегося меню Jquery?

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

Для мышки я бы добавил цепочку анимации перед вызовом hide ():

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

, что даст задержку в 2 секунды.

Answer 3

Укажите «медленно» в качестве параметра для отображения и скрытия. От 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");
});