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

Question

what is wrong in this code? I\'m trying to get this effect: fadeOut(500) and attr(\'class\',\'myClass\') delayed by 600 millisecs.. then dela

Answer 1

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