jquery - 使用 jQuery 延迟更改 CSS 属性

Question

如何使用jQuery延迟更改HTML元素的CSS属性。

想象一下这个场景。我有一个div带bg color蓝色的。我希望它淡出，当它淡入时我希望它bg color是红色的。

我试过这个。

$("div").fadeOut().delay(500).css("background-color","red").fadeIn();

虽然淡出 div 在淡入之前已经将颜色更改为红色。它不遵循链接事件的顺序。我怎样才能在一行中做到这一点。

Answer 1

queue您可以使用以下函数让任何函数参与动画队列：

$("div")
    .fadeOut()
    .delay(500)
    .queue(function() {
        $(this).css("background-color","red").dequeue();
    })
    .fadeIn();

注意dequeue回调中的调用，它告诉 jQuery 继续队列中的下一件事。

Answer 2

$("div").fadeOut(500, function() {
    $("div").css("background-color","red").fadeIn()
});