使用Javascript（或jQuery）淡入/淡出HTML元素的背景颜色 [英] Fade in / fade out background color of an HTML element with Javascript (or jQuery)

问题描述

我有一张表，其行需要突出显示&然后清除。我正在使用上下文类来为表行着色（不是必要的要求） 。 javascript部分如下。我怎样才能使用javascript / jQuery / Bootstrap动画即fadeIn / fadeOut行的颜色。下面的代码立即添加&删除颜色。

I have a table whose row needs to be highlighted & then cleared. I'm using contextual classes to color the table rows (not a necessary requirement). The javascript part is given below. How can I animate i.e. fadeIn / fadeOut the coloring of rows using javascript / jQuery / Bootstrap. The code below instantly adds & removes the color.

$('tr').eq(1).addClass('success');

setTimeout(function(){
    $('tr').eq(1).removeClass('success');
},2000);

http://jsfiddle.net/5NB3s/

PS在此尝试避免 jQuery UI 路由如何使用jquery淡入/淡出背景色？

P.S. Trying to avoid the jQuery UI route here How do you fade in/out a background color using jquery?

推荐答案

这就是我做的东西。它可以很好地工作，而不需要任何UI库。如果需要，甚至可以删除jQuery。

Here's what I cooked up. It works nicely without the need of any UI library. Even jQuery can be eliminated if needed.

//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包含在一个匿名函数，使其在循环中正常工作（原因）

• 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 )

这篇关于使用Javascript（或jQuery）淡入/淡出HTML元素的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！