Can I delay jQuery addClass?

Question

Is there a way to delay the addClass() of jQuery? For example this code

$('#sampleID').delay(2000).fadeOut(500).delay(2000).addClass('aNewClass');

When I load the page, it has the class 'aNewClass' already on id 'sampleID'. How to solve this problem? What I want is the addClass will happen after it ended the fadeOut().

score 21 · Answer 1 · edited May 23 '17 at 10:29

21

You can't directly delay an addClass call, however you can if you wrap it in a queue call which takes a function as a parameter like this

$(this).delay(2000).queue(function(){$(this).addClass('aNewClass')});

See this post: jQuery: Can I call delay() between addClass() and such?

edited May 23 '17 at 10:29

Community

1
1

answered Feb 26 '13 at 08:37

Dave

1,409
2
18
14

score 12 · Accepted Answer · answered Jan 29 '11 at 09:54

12

What I want is the addClass will happen after it ended the fadeOut().

You can use callback function to fadeOut like this:

$('#sampleID').fadeOut(500, function(){
  $(this).addClass('aNewClass');
});

answered Jan 29 '11 at 09:54

Sarfraz

377,238
77
533
578

You haven't replaced the non-functional call to `delay`. – lonesomeday Jan 29 '11 at 09:56
@lonesomeday: That shouldn't matter in the code but thanks done :) – Sarfraz Jan 29 '11 at 09:57

score 1 · Answer 3 · answered Jun 08 '17 at 19:53

1

You can also use setTimeout, with CSS transition :

setTimeout(function() {
    $('#sampleID').addClass('aNewClass');
}, 2000);

And the CSS

#sampleID {
transition: opacity 1s ease;
opacity: 0;
}

#sampleID.aNewClass {
opacity: 1;
}

answered Jun 08 '17 at 19:53

brandozz

1,059
6
20
38

score 1 · Answer 4 · answered Jan 29 '11 at 09:54

You can't do this with delay because it only affects the effects queue. It doesn't "pause" execution of later code if it is not implemented using the queue.

You need to do this with setTimeout:

$('#sampleID').delay(2000).fadeOut(500, function() {
    setTimeout(function() {
        $(this).addClass('aNewClass');
    }, 2000);
});

This uses the complete callback of fadeOut and then sets a function to execute 2 seconds in the future.

score 0 · Answer 5 · answered Jan 29 '11 at 09:53

0

You should use callbacks .

$('#sampleID').delay(2000).fadeOut(500,function(){
   $(this).delay(2000).addClass('aNewClass');
});

http://api.jquery.com/fadeOut/

answered Jan 29 '11 at 09:53

Arshdeep

4,281
7
31
46

Can I delay jQuery addClass?

5 Answers5

Linked