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

Question

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)

Why wouldn't hoverIntent work? Seems like it will do just want you want to do — PetersenDidIt, Feb 15 '10 at 13:54
There are terrific answers in response to your previous post. Including examples on how to accomplish this with jQuery. Take a look at Doug Neiner's post again. — Chris Van Opstal, Feb 15 '10 at 13:55
The post was just found while searching and I really tried to incorporate the setTimeout as in the example. I first did this post after given up. I aint that much of a "shark" when it comes to javascript. It is getting better though, slooowly... — Tillebeck, Feb 16 '10 at 08:21

score 4 · Answer 1 · answered Feb 15 '10 at 13:55

4

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

answered Feb 15 '10 at 13:55

prodigitalson

60,050
10
100
114

1

yep, exactly. And it will work too. Will go with the hoverIntent since there is a bonus of a sensitivety for mouse movements. But thanks for your correct answer. – Tillebeck Feb 15 '10 at 14:15
I totally agree with your choice for HoverIntent.. its much more versatile. – prodigitalson Nov 03 '10 at 04:04

score 2 · Accepted Answer · answered Feb 15 '10 at 13:56

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

answered Feb 15 '10 at 13:56

PetersenDidIt

25,562
3
67
72

You are right. HoverIntent will work. I use it now. The combination og sensitivity and interval is perfect and make it more likely that one only do the addClass if one really wants to. – Tillebeck Feb 16 '10 at 08:17

score 1 · Answer 3 · answered Feb 15 '10 at 13:56

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

score 1 · Answer 4 · answered Feb 15 '10 at 13:59

1

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

answered Feb 15 '10 at 13:59

graphicdivine

10,937
7
33
59

Interesting way to solve the problem. I have not tested it but guess that it should work. I will save it as a code snippet to solve this issue another time. I read that there will be a delay function in jQuery 1.4 that should be able to replace your animate function – Tillebeck Feb 16 '10 at 08:25

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

4 Answers4