使用 jQuery 延迟更改 CSS 属性答案

【问题标题】：Using jQuery to change CSS attributes with delay使用 jQuery 延迟更改 CSS 属性
【发布时间】：2013-08-26 07:23:57
【问题描述】：

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

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

我试过了。

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：