延迟jquery css变化

我已经写了一个代码，使得一个div橙色的边界，然后在一两秒后将其更改为黑色，但实际发生的是它直接变为黑色，请任何帮助吗？谢谢！延迟jquery css变化

代码：

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

来源

2011-07-18 Jake

另请参阅：http://stackoverflow.com/questions/5396119/using-jquery-delay-with-css/35057342#35057342 –

jQuery的delay功能仅适用于加入到fx队列（功能类似于fadeIn或slideDown）功能。 css不是这些功能之一（尝试delay任何其他非fx -queue感知功能，它也不会工作）。

从docs：

加入jQuery的1.4版本中，.delay（）方法允许我们推迟的跟在它后面的队列功能的执行。它可以使用与标准效果队列或自定义队列。队列中后续事件只有延迟;例如，这不会延迟不使用效果队列的.show（）或.hide（）的无参数形式。

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

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

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

来源

2011-07-18 11:25:53

谢谢！无论如何，要让边框淡入淡出其他颜色？谢谢！ – Jake

可以使用[.queue（）方法]（http://api.jquery.com/queue/）将@JamesAllardice函数添加到'fx'队列中 – 2012-01-10 16:28:03

您可以使用jQuery插件让您为动画颜色转换。这一个例如：https：//github.com/jquery/jquery-color – Stefan

不能使用delay()与css()为CSS更改不会放入队列效果像动画是。

相反，你将需要使用setTimeout：

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

编辑：要动画边框颜色，你需要包括jQuery UI的核心，并确保独立动画边框的两侧。您可以看到如何执行此操作的示例here。

来源

2011-07-18 11:30:17

谢谢！无论如何，要让边框淡入淡出其他颜色？谢谢！ – Jake

我已经更新了我的答案，包括如何做到这一点。 –

@LukeBennett函数可以使用[.queue（）方法]（http://api.jquery.com/queue/）添加到'fx'队列中。 – 2012-01-10 16:28:57

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

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

，然后在jQuery的：

$（ “＃yourID”）动画（{ '边界'： '＃000000'}，3000）。 < ----最后一个参数是你的延迟= 3秒

来源

2011-07-18 12:29:13 BorisD

@ 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”你在原来的例子规定只有十分之一秒。我的例子使用了半秒钟。

来源

2012-01-10 16:23:13

延迟jquery css变化

回答

相关问题