Question

I have a div which its initial color is green.

I don’t understand why he is getting the red color ** immediately** ,

while the animations are fine in queue.

The queue is fine and by order , but the color is changed immediatly.

Isn’t he supposed to be after the second animation ?

Is there difference between priority of animations vs addClass ?

$("div").show("slow").animate({left:'+=200'},2000).animate({top:'+=200'},2000).css('background-color','red'); 

Answer 1

The css method doesn’t put the change on the animation queue, so it’s changed immediately when you run the code.

You can put the CSS change in the animation queue using the queue method:

$("div").show("slow")
.animate({left:'+=200'},2000)
.animate({top:'+=200'},2000)
.queue(function(){
  $(this).css('background-color','red');
});