Question

162

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

rated 0 times [ 166] [ 4] / answers: 1 / hits: 31136 / 10 Years ago, sat, march 22, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kevenjeffreyr

Add To Favorites

Follow

Total Points: 286

Total Questions: 112

Total Answers: 95

Location: Zambia

Member since Thu, Jun 25, 2020

4 Years ago

answered 10 Years ago dusty · Accepted Answer

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 )