Using delay() with removeClass()

Question

How do I delay the removal of a css class in jQuery?

Here is my code

$(this).addClass("uk-form-danger").delay(5000).removeClass("uk-form-danger");

The above code does nothing. I can add the class with the following code

$(this).addClass("uk-form-danger");

and I can remove it with

$(this).removeClass("uk-form-danger");

but I can't delay the removal of the class.

score 4 · Accepted Answer · answered Jun 02 '15 at 01:21

4

You can easily accomplish that with a setTimeout:

var myItem = $(this);

myItem.addClass("uk-form-danger");
setTimeout( function(){ myItem.removeClass("uk-form-danger"); }, 5000 );

answered Jun 02 '15 at 01:21

Scott 'scm6079'

1,517
13
25

score 3 · Answer 2 · answered Jun 02 '15 at 01:21

jquery delay is only intended to use with animations, you will not be able to delay the removeClass this way, use setTimeout instead:

var $el = $('#myId');
$el .addClass("uk-form-danger")
setTimeout(function(){
    $el .removeClass("uk-form-danger");
}, 5000);

CristianHG · Answer 3 · 2015-06-02T01:23:57.827

1

Have you tried using setTimeout instead of delay?

var myObject = $(this);

myObject.addClass("uk-form-danger");

setTimeout(function()
{
    myObject.removeClass("uk-form-danger");
}, 5000);

edited Jun 02 '15 at 01:23

answered Jun 02 '15 at 01:21

CristianHG

442
5
16

1

This wont work. What do you thing 'this' is inside the timeout function's scope? – taxicala Jun 02 '15 at 01:21
Then you just create a variable and store it there, then refer to it likeso: `var myObject = $(this); myObject.removeClass("uk-form-danger");` – CristianHG Jun 02 '15 at 01:22
Well... that would be correct. But your answer is not doing that. – taxicala Jun 02 '15 at 01:23

Lumi Lu · Answer 4 · 2015-06-02T01:21:57.660

1

Try something like this using setTimeout

var self = $(this);
self.addClass('uk-form-danger');
setTimeout(function () {
    self.removeClass('uk-form-danger');
}, 5000);

edited Jun 02 '15 at 01:21

answered Jun 02 '15 at 01:21

Lumi Lu

3,289
1
11
21

1

This wont work. What do you thing 'this' is inside the timeout function's scope? – taxicala Jun 02 '15 at 01:21

score 0 · Answer 5 · answered Nov 20 '17 at 21:16

The easiest way is to use jQueryUI.

.delay() only works for methods in the effects queue. You need to place your .addClass() and .removeClass() into the default effects queue by including a duration.

$(this).addClass("uk-form-danger", 250).delay(5000).removeClass("uk-form-danger", 250);

Using delay() with removeClass()

5 Answers5