延迟 jquery css 更改答案

【问题标题】：delaying jquery css changes延迟 jquery css 更改
【发布时间】：2011-07-18 11:07:01
【问题描述】：

我编写了一个代码，它使 div 的边框变为橙色，然后在一两秒后将其更改为黑色，但实际发生的是它直接变为黑色，请帮忙？谢谢！

代码：

$('#newMessage1').css('border','2px solid #ffa800').delay(100).css('border','2px solid #000000');

【问题讨论】：

另见：stackoverflow.com/questions/5396119/using-jquery-delay-with-css/…

标签： jquery css delay

【解决方案1】：

jQuery delay 函数仅适用于添加到 fx 队列的函数（函数如 fadeIn 或 slideDown）。 css 不是这些函数之一（尝试delay 任何其他非fx-queue 感知函数，它也不起作用）。

来自docs：

在 1.4 版本中添加到 jQuery 中，.delay() 方法允许我们延迟执行队列中跟随它的函数。可以使用使用标准效果队列或自定义队列。仅有的队列中的后续事件被延迟；例如，这不会延迟不使用的 .show() 或 .hide() 的无参数形式效果队列。

jQuery delay 不能替代原生 JS setTimeout，在这种情况下，这可能是可行的方法。例如，您可以执行以下操作（工作示例 here）：

$('#newMessage1').css('border','2px solid #ffa800');

setTimeout(function() { 
    $("#newMessage1").css('border','2px solid #000000'); 
}, 1000);

【讨论】：

谢谢！反正有没有让边框淡入并淡入其他颜色？谢谢！
@JamesAllardice 函数可以使用.queue() method添加到fx队列中
您可以使用 jQuery 插件来制作颜色过渡动画。例如：github.com/jquery/jquery-color

【解决方案2】：

您不能将 delay() 与 css() 一起使用，因为 css 更改不会像动画那样放在效果队列中。

相反，您需要使用setTimeout:

$('#newMessage1').css('border','2px solid #ffa800');
setTimeout(function() { $('#newMessage1').css('border','2px solid #000000'); }, 1000);

编辑：要为边框颜色设置动画，您需要包含 jQuery UI 核心并确保为边框的每一侧单独设置动画。您可以查看如何执行此操作的示例here。

【讨论】：

谢谢！反正有没有让边框淡入并淡入其他颜色？谢谢！
@LukeBennett 函数可以使用.queue() method添加到fx队列中

【解决方案3】：

@James-Allardice 和 @Luke-Bennet 是正确的，默认情况下 CSS 更改不会添加到 fx 队列中，但没有理由不能将它们放在那里。

.queue() method 的第二种形式允许您将任何内容添加到队列中。您甚至不必使用标准的fx 队列，您可以创建自己的队列。

jQuery 文档页面上有一些很好的示例，但这里有一个可以解决您的特定需求：

$("#newmessage1").queue(function(){
    $(this).css("border", "2px solid #ffa800");
    $(this).dequeue();
});
$("#newmessage1").queue(function(){
    $(this).delay(500);
    $(this).css("border", "2px solid black");
    $(this).dequeue();
}

它又丑又不雅，但它可能比使用setTimeout更好。

根据@BorisD 的建议，更好的解决方案是使用.animate() method。它内置了您需要的功能：

$("#newmessage1").css("border", "2px solid #ffa800");
$("#newmessage1").animate({"border": "2px solid black"}, 500);

请注意，您在原始示例中指定的“100”只有十分之一秒。我的示例使用半秒。

【讨论】：

【解决方案4】：

为什么不在 Jquery 中使用 .animate() 呢？只需将 CSS 设置为默认边框：

您的 ID 或班级 { 边框：2px 实心#ffa800； }

然后在你的 Jquery 中：

$("#yourID").animate({'border': '#000000'},3000);

【讨论】：