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

How do I fade in text content with jQuery?

如何用jQuery淡出文本内容?

The point is to draw the user's attention to the message.

关键是要把用户的注意力吸引到消息上。

9 个解决方案

#1

This exact functionality (3 second glow to highlight a message) is implemented in the jQuery UI as the highlight effect

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

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

Color and duration are variable

颜色和持续时间是可变的。

#2

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有一些内置的效果，可能对您也有用。

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

#3

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函数添加另一个具有不同背景颜色的类，如'box highlight '或类似的东西，使用以下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

这里有一个codepen:https://codepen.io/anon/pen/baaLYB

#4

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属性，但是对于背景色，您需要使用color插件。一旦你包含了这个插件，你就可以像其他插件一样使用$('div')。动画({backgroundColor: '#f00'})改变颜色。

As others have written, some of this can be done using the jQuery UI library as well.

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

#5

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将亮度从50%提高到100%，本质上是将背景设置为白色(您可以根据颜色选择任何值)。
SetTimeout is wrapped in an anonymous function for it to work properly in a loop ( reason )
SetTimeout被封装在一个匿名函数中，以便它在循环中正常工作(原因)

#6

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只是一个小的复活节彩蛋，则无需添加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-animation class 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");
});

#7

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 setTimeout to fire the plugin to fade back to the original background color.

使用这个插件，可以通过改变背景颜色来创建突出显示效果，然后添加一个setTimeout来触发插件，使其恢复到原来的背景颜色。

#8

To fade between 2 colors using only simple javascript:

使用简单的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);

Source: http://www.pagecolumn.com/javascript/fade_text.htm

来源:http://www.pagecolumn.com/javascript/fade_text.htm

#9

javascript fade to white without jQuery or other library:

在没有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>

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 unBlue value increments the minus blue until it reaches 255.

在打印中，黄色是负蓝色，所以从第3个rgb元素(蓝色)开始，小于255，以黄色高亮显示。然后，设置var unBlue值的10+将增加- blue，直到它达到255。

#1