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

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

关键是要引起用户对该消息的注意.

1> user113716..：

---

如果你想专门为元素的背景颜色设置动画,我相信你需要包含jQueryUI框架.然后你可以这样做:

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

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

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

2> micmcg..：

---

这个确切的功能(3秒发光以突出显示消息)在jQuery UI中实现为高亮效果

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

颜色和持续时间是可变的

---

$('newCommentItem').effect("highlight",{},3000);

---

另一个例子,改变颜色:$(元素).effect("highlight",{color:'blue'},3000);

3> NoDisplayNam..：

---

I know that the question was how to do it with Jquery, but you can achieve the same affect with simple css and just a little jquery...

For example, you have a div with 'box' class, add the following 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;
}

and then use AddClass function to add another class with different background color like 'box highlighted' or something like that with the following css:

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

I am a beginner and maybe there are some disadvantages of this method but maybe it'll be helpful for somebody

Here's a codepen: https://codepen.io/anon/pen/baaLYB

4> Ryan..：

---

通常,您可以使用.animate()方法来处理任意CSS属性,但对于背景颜色,您需要使用颜色插件.一旦你包含这个插件,你可以使用其他人已经指示$('div').animate({backgroundColor: '#f00'})改变颜色的东西.

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

5> user..：

---

仅使用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%,基本上使背景变白(您可以根据颜色选择任何值).

SetTimeout包含在一个匿名函数中,以便它在循环中正常工作(原因)

6> richfinelli..：

---

根据您的浏览器支持,您可以使用css动画.浏览器支持IE10和CSS动画.这很好,所以你不必添加jquery UI依赖,如果它只是一个小的复活节彩蛋.如果它是您站点的组成部分(IE9及以下版本也需要),请使用jquery UI解决方案.

.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;}
}

接下来创建一个jQuery单击事件,将your-animation类添加到您想要设置动画的元素,触发背景从一种颜色淡化到另一种颜色:

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

---

这是迄今为止最好的解决方案.这里是**[JSfiddle.net演示](http://jsfiddle.net/rzea/wwe0axzj/1/)**