views:

213

answers:

3

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

Specify "slow" as a parameter to show and hide. From 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");
});
mcandre
Not quite. That hides it slowly. It doesn't wait at all before hiding.
Matt Ball
+2  A: 

setTimeout is exactly what you need.

$('#mainnav a').bind('mouseout', function()
{
    var menu = this;
    setTimeout(function()
    {
        $(menu).parents('li').children('ul').hide();
    }, 1000);
});
Matt Ball
And the next time you show the menu, make sure this timer is off to prevent the menu from suddenly flipping on/off
baloo
thanks for the reply Bears, when I try it, the menu just stays now and doesn't disappear.
Keith Donegan
@Keith try setting: var menu = this; before setTimeout(), and change "this" into "menu" inside the timeout function
baloo
Thanks Baloo. Unfortunately the sub menu has a bit of a fit with your code :)
Keith Donegan
Ah yes, sorry about the `this` being off. Thanks baloo.
Matt Ball
A: 

For mouseout I would add a chained animation before the hide() call:

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

which would give a delay of 2 seconds.

Kevin Sedgley