Почему анимации и addClass ведут себя по-разному?

Question

У меня есть div , который начальный цвет зеленый .

Я не понимаю, почему он получает красный цвет ** сразу **,

пока анимации в порядке в очереди.

The queue is fine and by order, но цвет изменяется немедленно .

Разве он не должен быть после второй анимации ?

Есть ли разница между приоритетом анимации по сравнению с addClass?

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

Answer 1

Метод css не вносит изменения в очередь анимации, поэтому он изменяется сразу же после запуска кода.

Вы можете поместить изменение CSS в очередь анимации, используя метод queue:

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

Answer 2

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

Извините за отступы.

Answer 3

CSS не является функцией в очереди. Это выполняется немедленно. Вы можете выбрать между:

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

и

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