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

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

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

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

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

    颜色和持续时间是可变的

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

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

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

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

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

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

    我知道这个问题是如何与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; } 

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

    只使用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被封装在一个匿名函数中,以便在循环中正常工作( 原因 )

    根据您的浏览器支持,您可以使用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"); }); 

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

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

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

    使用简单的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

    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。