jquery addClass - wait, delay, speed, timeout or other

Question

Hi

The question has been posted several times and is how to delay an addClass.

I got this:

$("#menu ul li").hover(function(){
  $(this).addClass("hover");
},function(){
  $(this).removeClass("hover");
})

And want something similar but where the class is added after 500msek or so. Best answer so far is this one using settimeout. Maybe I just need a working example: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery

The hooverIntent will not work since it has to be an addClass.

Br. Anders

UPDATE: Four great answers! Thanks. I do not know why I did not think the hoverIntent would work, it can be used as seen in the answers. Actually all answers can be used each with pros and cons. I will go with the hoverIntent even though another plugin must be included. The pro for the hoverIntent is that a sensibilty can be set so not only a delay for the addClass can be set but it will first start counting when the mouse is positioned still obove the area (or not so still if sensitivety is lovered)

Answer 1

$("#menu ul li").hover(function(){
  var $this = $(this);
  var ovt = setTimeout(function(){$this.addClass('hover'); clearTimeout(ovt);}, 500);
},function(){
  var $this = $(this);
  var out = setTimeout(function(){$this.removeClass('hover'); clearTimeout(out);}, 500);
});

Is that what youre looking for?

Answer 2

I don't see why hoverIntent won't work:

$("#menu ul li").hoverIntent({    
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
    interval: 200, // number = milliseconds for onMouseOver polling interval    
    timeout: 500, // number = milliseconds delay before onMouseOut    
    over:function(){
        $(this).addClass("hover");
    },
    out: function(){
        $(this).removeClass("hover");
    }
});

Answer 3

Something like this

$(function(){
    $("#menu ul li").hover(function(){
        var elem = $(this);
        setTimeout ( function(){
            elem.addClass("hover");
        }, 1000) ;
        },function(){
        var elem = $(this);
        setTimeout ( function(){
            elem.removeClass("hover");
        }, 1000) ;
    })
});

Answer 4

Leaving setTimeout and hoverintent aside (although they are the most obvious ways to go), couldn't we use a null animation callback for this?

$("#menu ul li").hover(function(){
  $(this).animate("",500,"",function(){$(this).addClass("hover")};
},function(){
  $(this).animate("",500,"",function(){$(this).removeClass("hover");
})