Search code examples
jquerymenudrop-down-menudelaysettimeout

How to delay hiding of a menu with Jquery Dropdown Menu?

I have a dropdown menu that works fine, but I would like it so, that if I hover off the menu, it doesn't immediately hide again. So basically I would like a one second delay.

I have read about setTimeout, but not sure if it is what I need?

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

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

  • setTimeout is exactly what you need.

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