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 )

Answer 2

One way could be :

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

---

UPDATE Second way, much better, but... I'll explain :

Bootply : http://www.bootply.com/123956 [still the same url don't worry]

JS :

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


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

You have to use jQueryUI animate and the result it's visually good...

Answer 3

I had the same problem and couldn't find an easy way to do it other than programming. Another way to achieve fadding BG colors is using CSS properties for each row when hovering them.

#RowID{
background-color: #ececec;
background-color: rgba(236, 236, 236, 0.901961);
-moz-transition: background-color 1s cubic-bezier(1,1,1,1);
-moz-transition-delay: 0.5s;
-ms-transition: background-color 1s cubic-bezier(1,1,1,1);
-ms-transition-delay: 0.5s;
-o-transition: background-color 1s cubic-bezier(1,1,1,1);
-o-transition-delay: 0.5s;
-webkit-transition: background-color 1s cubic-bezier(1,1,1,1);
-webkit-transition-delay: 0.5s;
transition: background-color 1s cubic-bezier(1,1,1,1);
transition-delay: 0s;
}

#RowID:hover {
    background-color: rgb(206, 128, 128);
} 

In addition you can always set the delay you want for the BG to change setting the transition-delay property.

JSFiddle

Answer 4

Similar to user's answer above, except to handle the fade, I change the opaque value to fade in and out. I also use the id tag to target different table cells, so we use different colors. First you need to tag the cell with an id attribute:

<td id="cellToShade">.01</td>

Then put the javascript in line below to set the timeouts and change the opaque value:

<script>

var d = 500;
var opaqueness=.05;
for(var i=0; i<=600; i=i+1){ 
    d  += 10;
    opaqueness += .0001;
    (function(i,d, opaqueness){
        setTimeout(function(){
            document.getElementById("cellToShade").style.background = "rgba(255, 0, 0, "+ opaqueness +")";
        }, d);    
    })(i,d, opaqueness);

}

</script>

You might want to play around with the opaqueness variable, i, and d to get the effect timing you want.

Answer 5

jQuery already has a fadeOut() option. Why not just use that and a div positioned behind the element-to-highlight? All you need is a little CSS/JavaScript magic. It's easy, and you get the nice, smooth fadeOut() coded up by jQuery developers...

JSBin Demo --

function highlightElement(element) {
        const background = $('<div></div>');

        $(background).css({
                'position':'relative',
                'top':'-' + $(element).height() + 'px',
                'background-color':'yellow',
                'z-index':'-10',
                'height':$(element).height() + 'px',
                'width':$(element).width() + 'px',
                'margin-bottom':'-' + $(element).height() + 'px',
                'padding':'0px',
                'float':'left',
        });

        $(background).appendTo(element);

        $(background).fadeOut(5000);

        return true;
}

To add some explanation:

• background CSS uses a combination of a negative margin-bottom (calculated from element size) and a negative top, as well, to position it correctly. width, of course, is set, but that just affects width and not overall placement. z-index forces the dummy element we're making to be underneath.
• fadeOut(5000) fades out the dummy background element we just created.

Answer 6

The 105 of the rgb(255,255,105) is how yellow to start. The 100 in the setInterval call is how fast the yellow fades to white.

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
    var unBlue=105;
    var gEvent=setInterval("toWhite();", 100);
    function toWhite(){
        if(unBlue<255) document.getElementById("x").style.backgroundColor="rgb(255,255,"+unBlue+")";
        else clearInterval(gEvent)
        unBlue+=10;
    }
</script>