Delay adding a class for 2 seconds in hover()

Question

How do I use easing or time delay on addClass();?

$("#date_1").hover(
    function () {
        $(this).addClass("door");
        $(this).addClass("doorstatic", "slow"); // after 2seconds i want to add this class during the hover
    }, 
    function () {
        $(this).removeClass("door");
        $(this).removeClass("doorstatic"); // both classes are instantly removed when hover off
    }
);

Andreas Louv · Accepted Answer · 2012-12-12T09:34:18.190

14

$("#date_1").hover(   
    function () {
        var $this = $(this);

        $this.addClass("door");
        setTimeout(function() {
            $this.addClass("doorstatic");
        }, 2000); // 2000 is in mil sec eq to 2 sec.
    },
    function () {
        $(this).removeClass("door doorstatic");
    }
);

You can group your classes like removeClass("door doorstatic")

The problem here is that if you mouseover and before two seconds mouse out you will still have the class doorstatic on you element.

The fix:

$("#date_1").hover(    
    function () {
        var $this = $(this),
            timer = $this.data("timer") || 0;

        clearTimeout(timer);
        $this.addClass("door");

        timer = setTimeout(function() {
            $this.addClass("doorstatic");
        }, 2000); // 2000 is in mil sec eq to 2 sec.

        $this.data("timer", timer);
    },
    function () {
        var $this = $(this),
            timer = $this.data("timer") || 0;

        clearTimeout(timer);
        $this.removeClass("door doorstatic");
    }
);

Created a live example of the solution at jsFiddle.

edited Dec 12 '12 at 09:34

answered Dec 09 '11 at 11:14

Andreas Louv

46,145
13
104
123

The "doorstatic" class will probably be added 2 seconds after hover (mouse enter) even if you choose to remove the mouse (mouse leave) before those 2 seconds. – Stefan Dec 09 '11 at 11:20
But I have several.. I have a calendar basically and there are boxes in a row.. the user may use the mouse and flow over many ... there is more than one box next to eac other on page.. – TheBlackBenzKid Dec 09 '11 at 11:23
Nice! Really like the use of `data()` and the `||` operator :) – Stefan Dec 09 '11 at 11:37
1

It should work on several elements as he´s storing the timer on/together with the current(this) element. You´ll have to use a new selector for the hover event though. – Stefan Dec 09 '11 at 11:39

Rory McCrossan · Answer 2 · 2011-12-09T11:32:39.573

2

The setTimeout method of javascript can be used to run code you specify after a set delay in miliseconds.

Try this:

var timeout;
$("#date_1").hover(
    function () {
        $(this).addClass("door");
        timeout = setTimeout(function() { $(this).addClass("doorstatic"); }, 2000);
    }, function () {
        clearTimeout(timeout);
        $(this).removeClass("door doorstatic");
    }
);

edited Dec 09 '11 at 11:32

answered Dec 09 '11 at 11:14

Rory McCrossan

331,213
40
305
339

1

`addClass` doesn´t accept a second string argument like "slow". – Stefan Dec 09 '11 at 11:18

tmaximini · Answer 3 · 2011-12-09T13:44:48.160

2

Actually you can just append a call to jQuery's delay to you addClass call.

Something like

 $(this).addClass("door").delay(2000).addClass("doorstatic", "slow");

should do the trick.

edited Dec 09 '11 at 13:44

answered Dec 09 '11 at 11:21

tmaximini

8,403
6
47
69

There's no second argument in the addClass-method. And I don't think delay will work there. – OptimusCrime Dec 09 '11 at 11:23
1

@OptimusCrime ~ jQuery UI extends the `.addClass()` method (along with a handful of others) to support animation. http://docs.jquery.com/UI/Effects/addClass – Richard Neil Ilagan Dec 09 '11 at 13:34

Delay adding a class for 2 seconds in hover()

3 Answers3

Linked