延迟jquery css的变化

我写了一个代码，使得一个div橙色的边框然后在一两秒后将其变为黑色，然而实际发生的是它直接变成黑色，请问有什么帮助吗？ 谢谢！

码：

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

Answer 1

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

来自文档 ：

在1.4版本中添加了jQuery，.delay（）方法允许我们延迟队列中跟随它的函数的执行。 它可以与标准效果队列一起使用，也可以与自定义队列一起使用。 只有队列中的后续事件才会延迟; 例如，这不会延迟不使用效果队列的.show（）或.hide（）的无参数forms。

jQuery delay不能替代本机JS setTimeout ，在这种情况下可能是要走的路。 例如，你可以做这样的事情（ 这里的工作示例）：

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

Answer 2

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

相反，您将需要使用setTimeout ：

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

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

Answer 3

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

.queue（）方法的第二种forms允许您向队列添加任何内容。 您甚至不必使用标准的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更好。

更好的解决方案是使用.animate（）方法作为@BorisD推荐使用。 它具有您需要的内置function：

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

请注意，您在原始示例中指定的“100”仅为十分之一秒。 我的例子使用了半秒钟。

Answer 4

你为什么不在Jquery中使用.animate（）？ 只需将CSS设置为默认边框：

yourID或Class {border：2px solid＃ffa800; }

然后在你的Jquery中：

$（“＃yourID”）。animate（{‘border’：’＃000000’}，3000）; <----最后一个参数是你的延迟= 3秒