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

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: 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)

---

$("#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?

---

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");
    }
});

---

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) ;
    })
});

---

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");
})