如何使用jQuery实现背景颜色的淡入/淡出效果？

Question

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

重点是吸引用户的注意力到这条消息上。

- mrblah

---

你可以从这里开始：http://docs.jquery.com/Effects/fadeIn http://docs.jquery.com/Effects/fadeOut http://docs.jquery.com/UI/Effects/ColorAnimations - nonopolarity

你不必使用颜色或UI插件来为背景颜色添加动画效果。我已经在这里回答了这个问题（https://dev59.com/gXI-5IYBdhLWcg3wwLS3#5718151）。 - matadur

Answer 1

如果你想特别地为一个元素动画化背景色，我认为你需要引入jQueryUI框架。然后你可以这样做：

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

jQueryUI有一些内置效果，可能对您有用。

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

- user113716

---

为了实现这一点，我不得不包含"jQuery Color"，它也在jQuery文档中提到（"（例如，可以动画化宽度、高度或左侧，但不能动画化背景颜色，除非使用jQuery.Color插件）"）。 - Boris

“'slow'” 可以被秒数所替代…其中 1000 等于 1 秒…依此类推。 - Pathros

Answer 2

这个功能（3秒钟的高亮突显消息）在jQuery UI中被实现为highlight效果。

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

颜色和持续时间可变。

- micmcg

---

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

另一个例子，改变颜色：$(element).effect("highlight", {color: 'blue'}, 3000); - Jorge Olivares

@RaviRam - 完美！ - kneidels

Answer 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函数添加另一个类，其背景色不同，例如“box highlighted”等，CSS如下：

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

这是一个 CodePen 示例： https://codepen.io/anon/pen/baaLYB

- NoDisplayName

---

很棒的解决方案。谢谢。 - thedp

这是一个非常棒的解决方案，不需要任何额外的库，并且在所有现代浏览器中都有本地支持。谢谢！ - rprez

Answer 4

通常可以使用.animate()方法来操作任意CSS属性，但是对于背景颜色，您需要使用color插件。一旦包含了此插件，您就可以像其他人所指示的那样使用$('div').animate({backgroundColor: '#f00'})来改变颜色。

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

- Ryan

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%，实质上使背景变为白色（您可以根据您的颜色选择任何值）。
• 将setTimeout包装在匿名函数中，以便它在循环中正常工作（原因）。

- user

Answer 6

根据您的浏览器支持，您可以使用CSS动画。CSS动画的浏览器支持是IE10及以上版本。这很好，因此如果只是一个小彩蛋，您就不必添加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");
});

- Rich Finelli

---

这绝对是最好的解决方案。这里有 **JSfiddle.net上的演示**。 - Ricardo Zea

Answer 7

我编写了一个超级简单的jQuery插件来实现类似于这样的功能。我希望它非常轻量级（压缩后只有732字节），因此包括大型插件或UI对我来说不是问题。它仍然有些粗糙，欢迎提供反馈。

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

使用该插件，可以通过更改背景颜色并添加setTimeout以触发插件淡出到原始背景颜色来创建高亮效果。

- Dominic P

---

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

Answer 8

使用简单的 JavaScript 实现两种颜色之间的淡入淡出效果：

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实现的文本渐隐效果。它通过改变文本的透明度来实现动画效果。你可以在网页中使用它，为你的文字添加一些生动的效果。

- Curtis Yallop

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>

在印刷中，黄色是减去蓝色的，因此从第3个rgb元素（蓝色）小于255开始，就会出现黄色高亮。然后，在设置“var unBlue”值的10+中，减去蓝色的值增加直到达到255。

- gordon