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

Question

Something as simple as:

$("#div").addClass("error").delay(1000).removeClass("error");

doesn't seem to work. What would be the easiest alternative?

Timms

wanted to do exactly the same thing. It would be cool to call $("#div").addClassTemporarily("error",1000) – Iover

Answer 1

You can create a new queue item to do your removing of the class:

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

Or using the dequeue method:

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

The reason you need to call next or dequeue is to let jQuery know that you are done with this queued item and that it should move on to the next one.

Wilkie

I like this option because it makes it easy to pass a reference to the jquery object thats used in the queued function, so it can be used in a more generic context (without hard coded names). – Champerty

Why do we need "next"? Can we do $("#div").addClass("error").delay(1000).queue(function(){ $(this).removeClass("error"); }); Seems more elegant? – Humiliation

@Humiliation You don't need to pass a 'next' queue item. You may choose to use the dequeue() method instead: api.jquery.com/dequeue – Cleat

Answer 2

AFAIK the delay method only works for numeric CSS modifications.

For other purposes JavaScript comes with a setTimeout method:

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);

Olivaolivaceous

+1: Don't use Jquery for Jquery's sake. There are simple javascript solutions to many problems. – Congruent

+1: Just the same as first comment. Simple JS also works fine some times. – Centrifugate

+1 for simplicity, but also +1'ed the accepted answer - as it pointed me out that the .queue() actually passes continuation object that must be called manually (the 'next()'). I've spent half of hour wondering why my chain of parameterless callbacks execute only the first one -- many examples on other sites use a single delay in chain and a parameterless callback, which is a bit misleading oversimplification of that mechanism – Kingsly

Just a pedant note: setTimeout comes from the browser's window object (BOM). JavaScript (understood as ECMA Script) doesn't have that method. – Grose

Answer 3

I know this this is a very old post but I've combined a few of the answers into a jQuery wrapper function that supports chaining. Hope it benefits someone:

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

And here's a removeClass wrapper:

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

Now you can do stuff like this - wait 1sec, add .error, wait 3secs, remove .error:

$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');

Irruption

Very helpful! Thank you! – Raquelraquela

Answer 4

jQuery's CSS manipulation isn't queued, but you can make it executed inside the 'fx' queue by doing:

$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });

Quite same thing as calling setTimeout but uses jQuery's queue mecanism instead.

Tinct

This works for me better then accepted answer (calls not repeats if there is a transition transformation in class). – Polemic

Answer 5

Of course it would be more simple if you extend jQuery like this:

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

after that you can use this function like addClass:

$('div').addClassDelay('clicked',1000);

Crist

and if you want to add chaining support, read te basics about plugin creation, or simply add return this to the function... – Crist

Answer 6

Delay operates on a queue. and as far as i know css manipulation (other than through animate) is not queued.

Alt

Answer 7

delay does not work on none queue functions, so we should use setTimeout().

And you don't need to separate things. All you need to do is including everything in a setTimeOut method:

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);

Hag

You don't have to use delay() with setTimeout(). – Jaguarundi

@Jaguarundi I don't think you get the idea. If you dont use setTimeout, then that delay wont work – Hag

The solution doesn't need both to work together. Either use delay() with queue() in jQuery or simply use setTimeout() can solve the problem. I am not saying your answer is wrong. – Jaguarundi

Answer 8

Try this:

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);

Dragnet

Answer 9

Try this simple arrow funtion:

setTimeout( () => { $("#div").addClass("error") }, 900 );

Camelot

Answer 10

Another way...

$("#div").addClass("error"); 
setTimeout(function () { $("#div").removeClass("error"); }, 1000);

Adipose

Answer 11

$("#div").addClass("error").show(0).delay(1000).removeClass("error");

Thanks me later.

Flammable