Search code examples
jquerytimeoutwaitdelayaddclass

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)

Solution

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