Question

so I have a drop down navigation that appears on hover and I’m trying to get a delay in there to improve usability. Originally I was using hoverIntent which worked beautifully everywhere except on IE8 and below.

So instead I’m trying to do the delay with plain old Javascript but the setTimeout function won’t call my jQuery.

var J = jQuery.noConflict();

 J(".navigation li").hover(function(){J(this).addClass("hover");},function(){setTimeout("J(this).removeClass('hover');",500);});      

When I set it up like this:

 function off(){J(this).removeClass("hover"); alert("hello");}


J(".navigation li").hover(function(){J(this).addClass("hover");},function(){setTimeout("off()",500);}); 

The alert works perfectly but not the .removeClass function.

Am I missing something?

Answer 1

this inside setTimeout is not the li element; i recommend you to use setTimeout overload that receives a function, and before set a variable to this to keep a reference:

J(".navigation li").hover(function(){
   J(this).addClass("hover");
},
function(){
  var self = this;
  setTimeout(function() {
         J(self).removeClass('hover');
  },500);
});