如何使用jquery淡入/淡出背景色？

如何使用jQuery淡入文本内容？

关键是要吸引用户的注意力。

Answer 1

这个确切的function（3秒发光来突出显示一条消息）在jQuery UI中作为高亮效果来实现

http://docs.jquery.com/UI/Effects/Highlight

颜色和持续时间是可变的

Answer 2

如果你想具体animation元素的背景颜色，我相信你需要包含jQueryUI框架。 那你可以这样做：

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow'); 

jQueryUI有一些内置的效果，也可能对你有用。

http://jqueryui.com/demos/effect/

Answer 3

通常你可以使用.animate（）方法来操作任意的CSS属性，但是对于背景颜色，你需要使用颜色插件 。 一旦你包含这个插件，你可以使用像其他人指出$('div').animate({backgroundColor: '#f00'})来改变颜色。

正如其他人所写，其中一些可以使用jQuery UI库来完成。

Answer 4

我知道这个问题是如何与JQuery做到这一点，但你可以用简单的CSS和只是一个小jQuery实现相同的影响…

例如，你有一个“框”类的div，添加下面的CSS

 .box { background-color: black; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -ms-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; } 

然后使用AddClass函数添加不同背景颜色的另一个类，如“框高亮”或类似的东西，用下面的CSS：

 .box.highlighted { background-color: white; } 

我是一个初学者，也许这种方法有一些缺点，但也许会有所帮助

Answer 5

只使用jQuery（没有UI库/插件）。 即使jQuery可以很容易地消除

 //Color row background in HSL space (easier to manipulate fading) $('tr').eq(1).css('backgroundColor','hsl(0,100%,50%'); var d = 1000; for(var i=50; i<=100; i=i+0.1){ //i represents the lightness d += 10; (function(ii,dd){ setTimeout(function(){ $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); }, dd); })(i,d); } 

演示： http : //jsfiddle.net/5NB3s/2/

• SetTimeout将亮度从50％增加到100％，本质上使背景变白（您可以根据自己的颜色select任意值）。
• SetTimeout被封装在一个匿名函数中，以便在循环中正常工作（ 原因 ）

Answer 6

根据您的浏览器支持，您可以使用CSSanimation。 浏览器的支持是IE10和CSSanimation。 这很好，所以你不必添加jQuery的UI依赖，如果它只有一个小复活节彩蛋。 如果它是你的网站不可或缺的（又名IE9及以下版本），请使用jQuery UI解决scheme。

 .your-animation { background-color: #fff !important; -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important; } //You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera. @-webkit-keyframes your-animation-name { from { background-color: #5EB4FE;} to {background-color: #fff;} } -moz-animation: your-animation-name 1s ease 0s 1 alternate !important; } @-moz-keyframes your-animation-name { from { background-color: #5EB4FE;} to {background-color: #fff;} } -ms-animation: your-animation-name 1s ease 0s 1 alternate !important; } @-ms-keyframes your-animation-name { from { background-color: #5EB4FE;} to {background-color: #fff;} } -o-animation: your-animation-name 1s ease 0s 1 alternate !important; } @-o-keyframes your-animation-name { from { background-color: #5EB4FE;} to {background-color: #fff;} } animation: your-animation-name 1s ease 0s 1 alternate !important; } @keyframes your-animation-name { from { background-color: #5EB4FE;} to {background-color: #fff;} } 

接下来创build一个jQuery点击事件，将your-animation类添加到您想要animation的元素，从而触发从一种颜色到另一种颜色的背景淡出：

 $(".some-button").click(function(e){ $(".place-to-add-class").addClass("your-animation"); }); 

Answer 7

我写了一个超级简单的jQuery插件来完成类似的东西。 我想要的东西真的很轻（它是732字节缩小），所以包括一个大的插件或用户界面对我来说是不可能的。 它的边缘还是有些粗糙，所以欢迎反馈。

你可以在这里检查插件： https ： //gist.github.com/4569265 。

使用这个插件，通过改变背景颜色创build一个突出的效果，然后添加一个setTimeout来触发这个插件，可以淡化回原来的背景颜色，这将是一件简单的事情。

Answer 8

使用简单的JavaScript来淡入淡出2种颜色：

 function Blend(a, b, alpha) { var aa = [ parseInt('0x' + a.substring(1, 3)), parseInt('0x' + a.substring(3, 5)), parseInt('0x' + a.substring(5, 7)) ]; var bb = [ parseInt('0x' + b.substring(1, 3)), parseInt('0x' + b.substring(3, 5)), parseInt('0x' + b.substring(5, 7)) ]; r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16); g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16); b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16); return '#' + r.substring(r.length - 2) + g.substring(g.length - 2) + b.substring(b.length - 2); } function fadeText(cl1, cl2, elm){ var t = []; var steps = 100; var delay = 3000; for (var i = 0; i < steps; i++) { (function(j) { t[j] = setTimeout(function() { var a = j/steps; var color = Blend(cl1,cl2,a); elm.style.color = color; }, j*delay/steps); })(i); } return t; } var cl1 = "#ffffff"; var cl2 = "#c00000"; var elm = document.getElementById("note"); T = fadeText(cl1,cl2,elm); 

资料来源： http ： //www.pagecolumn.com/javascript/fade_text.htm

Answer 9

JavaScript淡入淡出没有jQuery或其他库：

 <div id="x" style="background-color:rgb(255,255,105)">hello world</div> <script type="text/javascript"> var gEvent=setInterval("toWhite();", 100); function toWhite(){ var obj=document.getElementById("x"); var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,"")); if(unBlue>245) unBlue=255; if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")"; else clearInterval(gEvent) } </script> 

在打印中，黄色是负的蓝色，因此从小于255的第3个rgb元素（蓝色）开始，以黄色突出显示。 然后，设置var unBlue值的10+增加负蓝，直到达到255。