你如何使用 jquery 淡入/淡出背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/967815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you fade in/out a background color using jquery?
提问by mrblah
How do I fade in text content with jQuery?
如何使用 jQuery 淡入文本内容？
The point is to draw the user's attention to the message.
关键是要引起用户对消息的注意。
采纳答案by micmcg
This exact functionality (3 second glow to highlight a message) is implemented in the jQuery UI as the highlight effect
这个确切的功能（3 秒发光以突出显示消息）在 jQuery UI 中作为突出显示效果实现
https://api.jqueryui.com/highlight-effect/
https://api.jqueryui.com/highlight-effect/
Color and duration are variable
颜色和持续时间是可变的
回答by user113716
If you want to specifically animate the background color of an element, I believe you need to include jQueryUI framework. Then you can do:
如果您想专门为元素的背景颜色设置动画，我相信您需要包含 jQueryUI 框架。然后你可以这样做：
$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');
jQueryUI has some built-in effects that may be useful to you as well.
jQueryUI 具有一些可能对您有用的内置效果。
回答by NoDisplayName
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...
我知道问题是如何用 Jquery 做到这一点，但你可以用简单的 css 和一点点 jquery 来达到同样的效果......
For example, you have a div with 'box' class, add the following css
例如，您有一个带有 'box' 类的 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;
}
and then use AddClass function to add another class with different background color like 'box highlighted' or something like that with the following css:
然后使用 AddClass 函数添加另一个具有不同背景颜色的类，例如“框突出显示”或类似以下 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
这是一个代码笔：https://codepen.io/anon/pen/baaLYB
回答by Ryan
Usually you can use the .animate()method to manipulate arbitrary CSS properties, but for background colors you need to use the color plugin. Once you include this plugin, you can use something like others have indicated $('div').animate({backgroundColor: '#f00'})to change the color.
通常你可以使用.animate()方法来操作任意 CSS 属性，但是对于背景颜色你需要使用颜色插件。包含此插件后，您可以使用其他人指示的内容$('div').animate({backgroundColor: '#f00'})来更改颜色。
As others have written, some of this can be done using the jQuery UI library as well.
正如其他人所写，其中一些也可以使用 jQuery UI 库来完成。
回答by user
Using jQuery only (no UI library/plugin). Even jQuery can be easily eliminated
仅使用 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);
}
Demo : http://jsfiddle.net/5NB3s/2/
演示：http: //jsfiddle.net/5NB3s/2/
- SetTimeout increases the lightness from 50% to 100%, essentially making the background white (you can choose any value depending on your color).
- SetTimeout is wrapped in an anonymous function for it to work properly in a loop ( reason)
- SetTimeout 将亮度从 50% 增加到 100%，基本上使背景变白（您可以根据您的颜色选择任何值）。
- SetTimeout 被包裹在一个匿名函数中，以便它在循环中正常工作（原因）
回答by Rich Finelli
Depending on your browser support, you could use a css animation. Browser support is IE10 and up for CSS animation. This is nice so you don't have to add jquery UI dependency if its only a small easter egg. If it is integral to your site (aka needed for IE9 and below) go with the jquery UI solution.
根据您的浏览器支持，您可以使用 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;}
}
Next create a jQuery click event that adds the your-animationclass to the element you wish to animate, triggering the background fading from one color to another:
接下来创建一个 jQuery 单击事件，将your-animation类添加到您希望设置动画的元素，触发背景从一种颜色淡入另一种颜色：
$(".some-button").click(function(e){
$(".place-to-add-class").addClass("your-animation");
});
回答by Dominic P
I wrote a super simple jQuery plugin to accomplish something similar to this. I wanted something really light weight (it's 732 bytes minified), so including a big plugin or UI was out of the question for me. It's still a little rough around the edges, so feedback is welcome.
我写了一个超级简单的 jQuery 插件来完成类似的事情。我想要一些非常轻量的东西（它缩小了 732 字节），所以包含一个大插件或 UI 对我来说是不可能的。它的边缘仍然有点粗糙，因此欢迎提供反馈。
You can checkout the plugin here: https://gist.github.com/4569265.
您可以在此处查看插件：https: //gist.github.com/4569265。
Using the plugin, it would be a simple matter to create a highlight effect by changing the background color and then adding a setTimeoutto fire the plugin to fade back to the original background color.
使用该插件，通过更改背景颜色然后添加一个setTimeout来触发插件以淡入原始背景颜色来创建高光效果将是一件简单的事情。
回答by Curtis Yallop
To fade between 2 colors using only simple javascript:
仅使用简单的 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);
回答by gordon
javascript fade to white without jQuery or other library:
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>
In printing, yellow is minus blue, so starting with the 3rd rgb element (blue) at less than 255 starts out with a yellow highlight. Then the 10+in setting the var unBluevalue increments the minus blue until it reaches 255.
在印刷中，黄色减去蓝色，所以从小于 255 的第三个 rgb 元素（蓝色）开始，以黄色高光开始。然后10+在设置var unBlue值中增加负蓝色，直到达到 255。
