Error Error - 1 year ago 160
Javascript Question

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

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.



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

Answer Source

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)

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
        }, dd);    

Demo :

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