为什么动画和 addClass 的行为不同？

Question

我有一个 div，其初始颜色为绿色。

我不明白为什么他立即获得红色颜色**，

而动画在队列中正常。

队列正常并且按顺序 ，但是颜色立即更改。

他不是应该在第二个动画之后吗？

动画优先级与 addClass 之间有区别吗？

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

Answer 1

css 方法不会将更改放入动画队列，因此当您运行代码时它会立即更改。

您可以使用 queue 方法将 CSS 更改放入动画队列中：

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

Answer 2

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'); });

Answer 3

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

请原谅我的缩进。