Luca Luca - 23 days ago 5
jQuery Question

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

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

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

Comments