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();
});
setTimeout is exactly what you need.
$('#mainnav a').bind('mouseout', function()
{
var menu = this;
setTimeout(function()
{
$(menu).parents('li').children('ul').hide();
}, 1000);
});
this being off. Thanks baloo.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.
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");
});
