为什么动画和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不是排队功能。它会立即执行。您可以选择：

$("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 2

css方法不会对动画队列进行更改，因此在运行代码时会立即更改。

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

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

请原谅我的缩进。