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


Answers:



90

如果要专门为元素的背景色设置动画,我相信您需要包括jQueryUI框架。然后,您可以执行以下操作:

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

jQueryUI具有一些内置效果,这些效果也可能对您有用。

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


3
为此,我必须在jQuery文档中添加“ jQuery Color”(“(例如,可以对宽度,高度或左边进行动画处理,但不能对背景颜色进行动画处理,除非使用了jQuery.Color插件)”)。
鲍里斯(Boris)

'slow'可以用秒代替...,其中1000等于1秒...等等。
Pathros

25

我知道问题是如何使用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;
}

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

这是一个Codepen:https ://codepen.io/anon/pen/baaLYB


很酷的解决方案。谢谢。
thedp'1

这是一个很好的解决方案,无需任何其他库即可工作,并且所有现代浏览器都原生支持该解决方案。谢谢!
rprez

14

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

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


9

仅使用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包装在一个匿名函数中,以便它可以在循环中正常工作(原因

8

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

2
到目前为止,这是最好的解决方案。这是JSfiddle.net中
Ricardo Zea

4

我编写了一个超级简单的jQuery插件来完成与此类似的操作。我想要一个重量很轻的东西(最小732字节),所以对我来说,包括一个大的插件或UI是不可能的。边缘仍然有些粗糙,因此欢迎您提供反馈。

您可以在此处检出插件:https : //gist.github.com/4569265

使用该插件,只需更改背景颜色,然后添加一个setTimeout即可触发插件以淡出回到原始背景颜色,即可创建高亮效果,这很简单。


Dominik P:感谢您的“小”插件。非常适合我的需求!
psulek

3

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


0

没有jQuery或其他库的情况下,javascript会淡化为白色:

<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的第三个rgb元素(蓝色)开始以黄色突出显示。然后10+in设置var unBlue值将减负蓝色递增,直到达到255。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.