I've been struggling to find a way to add a delay to this hover effect. If you visit , you'll see a menu at the top that displays panels when hovered over.
The CSS code to make them appear is:
#navigation li:hover > .panel {
display: block;
}
I'm searching for a jQuery solution that includes a 0.5 second delay after hovering over the #navigation li before applying display:block; to .panel. Additionally, I want a 0.3 second delay once leaving the hover of the li element or .panel before displaying:none; on .panel.
I've experimented with various CSS options without success, and attempts to implement different jQuery snippets from online have also proved fruitless.
The reason I need the delay is because people are unintentionally triggering the display of .panel by moving the mouse across the li element, which is causing annoyance.
Any assistance would be greatly appreciated.
Here's a CSS option I tried but couldn't get to work: http://jsfiddle.net/gryzzly/JWk7V/4/ (this is just an example - not my own) I much prefer a cross-browser compatible jQuery solution.
EDIT
Alright, I'm attempting to display the .panel box using only jQuery, no CSS involved.
Here's what I'm trying:
<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's the class .displayblock{display:block;}
When checking in Firebug, I can see that the displayblock class is added to the panel element, but the panel itself doesn't show up. Not sure where I'm going wrong.
I plan to use HoverIntent eventually, but first I aim to get the panel to display using only jQuery.