Can I delay jQuery addClass?

jquery delay addclass
Ryan picture Ryan · Jan 29, 2011 · Viewed 23.8k times · Source

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().

Answer

Dave picture Dave · Feb 26, 2013

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?

Related questions

Can I put delay(500) before an addClass()?

$(document).ready(function(){ $("#info-text-container").click(function(){ $("#info-text").delay(500).addClass("info-text-active"); }); }); This does not put an delay on it when it gets clicked. Which I want to accomplish. Why and is this hackable, possible to overcome? Thanks!

Read More
JavaScript sleep/wait before continuing

I have a JavaScript code that I need to add a sleep/wait function to. The code I am running is already in a function, eg: function myFunction(time) { alert('time starts now'); //code to make the program wait before …

Read More
Proper way to wait for one function to finish before continuing?

I have two JS functions. One calls the other. Within the calling function, I'd like to call the other, wait for that function to finish, then continue on. So, for example/pseudo code: function firstFunction(){ for(i=0;i<x;…

Read More