rwilson - 2:13 pm on Aug 10, 2012 (gmt 0)

I have a JQuery menu that I've added setTimeout to only display when a user wants to see the menu, as opposed to accidentally opening while scrolling past it.

Adding the setTimeout function is giving me some difficulties defining

$(this).children('.mainNavContent').show();

I want the hidden div for the menu link to show only after it has been hovered over for a set time. Any help would be greatly appreciated! I have the code below and a jsfiddle link.




$(document).ready(function () {

var navTimeout;
$('.mainNav-expand').mouseover(function() {
navTimeout = setTimeout(function() {

$('.mainNavContent').hide();
$(this).children('.mainNavContent').show();
alert("menu test");

}, 5500);
}).mouseleave(function() {
clearTimeout(myTimeout);
});

$("#mainNav-bar").mouseout(function() {
$('.mainNavContent').hide();
});

$(".mainNav-close").click(function() {
$('.mainNavContent').hide();
});

});



[jsfiddle.net...]