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?

Answer 1

What follows is somewhat hacky, but you could create a delay with a chained animate that changes nothing. Eg:

$("#div").addClass("error").animate({opacity:1.0}, 1000).removeClass("error");

which takes 1 second to turn the opacity from, well, 1.0 to 1.0, then fires removeClass()

(Not checked the code above - look at the docs for animate())

Answer 2

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

Answer 3

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

Answer 4

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