delay hover effect on navigation dropdown panel

I can't for the life of me figure out how to delay this hover. If you checkout http://forum.smartcanucks.ca there is a menu at the top when hovered panels display.

The CSS to make them show up is

#navigation li:hover > .panel {
    display: block;
}

I am looking for a jQuery alternative to make it so that when you hover over the #navigation li there is a .5 second delay before display:block; is applied to .panel and then when you leave the hover of the li element or .panel there is a .3 second delay before .panel returns back to display:none;

I have tried CSS options and couldn't get them to work, I have also tried to implement different snippets of jQuery I've found across the internet to no avail.

The reason behind the delay is people are accidentally moving the mouse across the li element and the unwanted .panel display is annoying.

I appreciate any help.

Here is a CSS option I tried to implement and couldn't get it to work: http://jsfiddle.net/gryzzly/JWk7V/4/ (this is an example - not mine) I would much rather prefer a jQuery solution that is cross browser.

EDIT

Ok, I am trying to get the .panel box to display with jquery only and not CSS

I am trying this

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $("#navigation li").hover(function() {  
        $('#navigation li:hover > .panel').addClass("displayblock");    
    },     
    function() {    
        $('.panel').removeClass("displayblock");     
    });
});
</script>

and here is the class .displayblock{display:block;}

when using firebug, the displayblock class is added to the panel element yet the panel does not display. Not sure what I am doing wrong.

I want to use HoverIntent but before I even try that I want to make the panel display with only jQuery.

jquery
css

2012-04-04 00:30
by Amber Stillwell

I would suggest using the jQuery hoverintent plugin - http://cherne.net/brian/resources/jquery.hoverIntent.html

There's no CSS only solution, so my recommendation would be to apply a class to allow the .panel to reveal using CSS and then remove that class with jQuery and apply the same effect using hover events.

2012-04-04 00:35
by michaelward82

Read after EDIT above. Still need assistance unfortunately - Amber Stillwell 2012-04-04 01:06

Try this fiddle http://jsfiddle.net/8r7Ys/ and then supplement it with the hoverintent plugi - michaelward82 2012-04-04 01:56

Thanks for the jsfiddle : - Amber Stillwell 2012-04-04 07:27

Your .panel might be displaying behind another element on the page. Try to fix that with CSS z-index properties. Remember to define a 'position' for elements that you try to apply z-indexes to.

Also, CSS3 transitions have full support for delays, which you could use to create this kind of dropdown without a single line of JS.

2012-04-05 13:22
by julesj