Question

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

代码：

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

Answer 1

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

来自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);

Answer 2

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

相反，您需要使用setTimeout：

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

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

Answer 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更好。

根据您的需求，更好的解决方案是使用.animate() method作为推荐的@BorisD。它具有您需要的内置功能：

$("#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）; ＆lt; ----最后一个参数是你的延迟= 3秒

延迟jquery css的变化

4 个答案: