delay() and fadeOut() don't delay attr() in the queue

jquery delay attr
Luca picture Luca · May 11, 2010 · Viewed 11.3k times · Source

what is wrong in this code? I'm trying to get this effect: fadeOut(500) and attr('class','myClass') delayed by 600 millisecs.. then delay(600) again, and fadeIn(500). The delays happen correctly but the attr() is not being delayed, it fires when #myDiv is still fading! :'( 

$('#myDiv').fadeOut(500)
           .delay(600)
           .attr('class','myClass')
           .delay(600)
           .fadeIn(500);

Answer

Nick Craver picture Nick Craver · May 11, 2010

The .delay() only affects the animation or fx queue (unless you specify a different queue specifically). Keep in mind that chaining and queuing are 2 distinctly different concepts, chaining continues the use of the same jquery set, but that's a different thing entirely than any event queues on elements in that set.

To have the .attr() call affected, you have to add it as a callback to that same queue using .queue(), like this:

$('#myDiv').fadeOut(500)
           .delay(600)
           .queue(function(next) { $(this).attr('class','myClass'); next(); })
           .delay(600)
           .fadeIn(500);

Also note there are .addClass(), .removeClass() and .toggleClass() methods available that may make this a bit cleaner :)

Related questions

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
jQuery: Wait/Delay 1 second without executing code

I can't get the .delay method working in jQuery: $.delay(3000); // not working $(queue).delay(3000); // not working I'm using a while loop to wait until an uncontrolled changing value is greater than or equal to another and I can't find any …

Read More