使用jQuery来延迟更改CSS属性

Question

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

想象一下这种情况。我有div bg color蓝色。我希望它淡出，当它消失后我希望bg color变成红色。

我试过了。

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

淡出div时已经将颜色变为红色，然后淡入。它不遵循链式事件的顺序。我怎样才能在一行中实现这一点。

Answer 1

您可以使用queue function：

让任何功能参与动画队列

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