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

ID : 20375

viewed : 11

Tags : jquerydelayjquery

Top 5 Answer for jQuery: Can I call delay() between addClass() and such?

vote vote

94

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.

vote vote

89

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

75

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

vote vote

69

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.

vote vote

50

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

Top 3 video Explaining jQuery: Can I call delay() between addClass() and such?

Related QUESTION?