JQuery Menu help using setTimeout

JQuery Menu using setTimeout function is creating issues with defining this

[rwilson]

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...]

[Fotiman]

setTimeout will run in a different scope, where "this" is not the same as "this" within the mousover callback function. You just need to create a closure to get around it. You can do that by changing your callback like so:

$(document).ready(function () {  
  var navTimeout;
  $('.mainNav-expand').mouseover(function() {
    var that = this;
    navTimeout = setTimeout(function() {
      $('.mainNavContent').hide();
      $(that).children('.mainNavContent').show();
      alert("menu test");
    }, 500);
  }).mouseleave(function() {
    clearTimeout(myTimeout);
  });

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

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

[jsfiddle.net...]

[rwilson]

Thanks! so I tried to take that concept and apply to the hoverIntent Jquery plugin because, setTimeout doesn't seem to be what I'm looking for. I think I'm close but it isn't working yet.

[jsfiddle.net...]

$(document).ready(function () {

$(".mainNav-expand").hoverIntent(showNav,hideNav);
var that = this;

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

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

});

function showNav() {
$(that).children('.mainNavContent').show();
alert("menutest");
}
function hideNav() {
$(that).children('.mainNavContent').hide();
alert("menutest");
}

[Fotiman]

that is undefined within your showNav function. In that function, this refers to the current element, so in there you DO want this instead of that

[rwilson]

Oops... Perfect! Thanks again!