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

【问题标题】：How do you fade in/out a background color using jquery?你如何使用 jquery 淡入/淡出背景颜色？
【发布时间】：2010-11-01 08:31:04
【问题描述】：

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

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

【问题讨论】：

你可以从这里开始：docs.jquery.com/Effects/fadeIn docs.jquery.com/Effects/fadeOut docs.jquery.com/UI/Effects/ColorAnimations
您不必使用颜色或 UI 插件来为背景颜色设置动画。我已经回答了这个问题here。

标签： jquery css background-color fade

【解决方案1】：

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

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

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

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

【讨论】：

我必须为此包含“jQuery Color”，这也在 jquery 文档中（“（例如，宽度，高度或左侧可以动画但背景颜色不能, 除非使用了 jQuery.Color 插件)").
'slow' 可以替换为秒...其中 1000 等于 1 秒...等等。

【解决方案2】：

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

https://api.jqueryui.com/highlight-effect/

颜色和持续时间是可变的

【讨论】：

$('newCommentItem').effect("highlight", {}, 3000);
另一个例子，改变颜色：$(element).effect("highlight", {color: 'blue'}, 3000);
@RaviRam - 完美！

【解决方案3】：

我知道问题是如何使用 Jquery 来实现，但是您可以使用简单的 css 和一点点 jquery 来实现相同的效果...

例如，你有一个 '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;
}

然后使用 AddClass 函数添加另一个具有不同背景颜色的类，例如“框突出显示”或类似的内容，使用以下 css：

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

我是初学者，也许这种方法有一些缺点，但也许对某人有帮助

这是一个代码笔： https://codepen.io/anon/pen/baaLYB

【讨论】：

很酷的解决方案。谢谢。
这是一个很好的解决方案，无需任何额外的库即可工作，并且在所有现代浏览器中都原生支持。谢谢！

【解决方案4】：

通常您可以使用.animate() 方法来操作任意CSS 属性，但对于背景颜色您需要使用color plugin。包含此插件后，您可以使用其他人指出的 $('div').animate({backgroundColor: '#f00'}) 来更改颜色。

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

【讨论】：

【解决方案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%，基本上使背景变白（您可以根据颜色选择任何值）。
SetTimeout 被封装在一个匿名函数中，以便在循环中正常工作 (reason)

【讨论】：

【解决方案6】：

根据您的浏览器支持，您可以使用 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 click 事件，将 your-animation 类添加到您想要动画的元素，触发背景从一种颜色淡入另一种颜色：

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

【讨论】：

这是迄今为止最好的解决方案。这是Demo in JSfiddle.net

【解决方案7】：

我写了一个超级简单的 jQuery 插件来完成类似的事情。我想要一些非常轻量级的东西（缩小了 732 字节），所以包含一个大插件或 UI 对我来说是不可能的。它的边缘仍然有些粗糙，因此欢迎提供反馈。

您可以在此处查看插件：https://gist.github.com/4569265。

使用该插件，通过更改背景颜色然后添加setTimeout 来触发插件以淡化回原始背景颜色来创建高亮效果将是一件简单的事情。

【讨论】：

Dominik P：感谢您的“小”插件。它非常适合我的需求！

【解决方案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

【讨论】：

【解决方案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。

【讨论】：