使用Javascript(或jQuery)淡入/淡出HTML元素的背景颜色

Question

我有一个表,其行需要突出显示然后清除.我正在使用上下文类来为表行着色(不是必需的要求).javascript部分如下.我怎么能使用javascript/jQuery/Bootstrap动画即fadeIn/fadeOut行的颜色.下面的代码会立即添加和删除颜色.

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

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

http://jsfiddle.net/5NB3s/

PS试图避免的jQuery UI的位置的路线怎么淡入/淡出使用jQuery背景颜色？

Answer 1

这就是我做的东西.它可以很好地工作,而不需要任何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包含在一个匿名函数中,以便它在循环中正常工作(原因)

Answer 2

一种方法可能是：

JS：

$('tr').eq(1).hide().addClass('success').fadeIn('slow');

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

Bootply： http: //www.bootply.com/123956

更新 第二种方式，更好，但是......我会解释：

Bootply： http: //www.bootply.com/123956 [仍然是相同的网址，不用担心]

JS：

$('tr').eq(1).animate({
  backgroundColor: "#dff0d8"
}, 2000 );


setTimeout(function(){
        $('tr').eq(1).animate({
          backgroundColor: "#ffffff"
        }, 2000 );
},2000);

你必须使用jQueryUI animate，结果它的视觉效果很好......