Fade in / fade out background color of an HTML element with Javascript (or jQuery)

Question

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/

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

Answer 1

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);
}

Demo : 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 is wrapped in an anonymous function for it to work properly in a loop ( reason )