Javascript 使用jQuery更改文本颜色两次

我正在用一些例子来搞乱WW3学校。我有以下代码：

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#p1”）.css（“颜色”、“红色”）.slideUp（2000）。slideDown（2000）。css（“颜色”、“绿色”）；
});
})

jQuery很有趣

单击“我”

详细说明@alex所说的内容，您可以为

slideDown

创建一个“回调函数”，动画完成后将调用该函数。在这里你可以改变颜色为绿色，像这样

$（“按钮”）。单击（函数（）{
$（“#p1”）.css（“颜色”、“红色”）.slideUp（2000）.slideDown（2000，函数（）{
$（this.css（“颜色”、“绿色”）；
});
});

jQuery很有趣

单击我可以调用三个jQuery函数，
.css（）
，
.slideUp（）
，和
.slideDown（）
。对
.css（）
的调用会立即按顺序进行，这就是为什么您会看到绿色而不是红色（如果您可以减慢时间，您会看到红色闪烁一瞬间）

但是，对
.slideUp（）
和
.slideDown（）
的调用将排队，以便依次完成。如上文所述：

队列是jQuery中所有动画的基础，它们允许
要在元素上异步执行的系列函数。方法
例如
.slideUp（）
，
.slideDown（）
，
.fadeIn（）
，和
.fadeOut（）
都使用
.animate（）
，它利用队列来构建一系列步骤
这将在整个过程中转换一个或多个CSS值
动画

这就是为什么事件按您看到的顺序发生。如果希望最后的
.css（）
调用发生在
.slideDown（）
之后，则需要将其放置在
.slideDown（）
的回调中，如下所示：


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#p1”）.css（“颜色”、“红色”）.slideUp（2000）.slideDown（2000，函数（）{
$（this.css（“颜色”、“绿色”）
});
});
})

jQuery很有趣

单击“我”
查看jQuery动画的完整回调。逻辑是，只有添加到队列中的项才会等待前面的异步调用完成。这主要包括动画和类似
.delay（）
的东西。如果每个同步方法都已排队，则会对性能产生影响。@Skint，谢谢。所以我猜改变颜色不被认为是动画：）正确。动画是一段时间内的一系列小变化。它们是异步完成的，否则浏览器将在此期间冻结，您将无法实际看到动画。谢谢大家提供的信息。