removing background color from prepended rows slowly

Question

I'm adding rows to a pre-existing table with a click of button. To differentiate which rows were added, I add a background color to the added rows. However, I would like to remove this background color after a while or fade it out.

Here is what I'm doing right now:

    $("#numlist").prepend("<tr class='newrow'><td>somenum</td></tr>");

How can I fade out the class newrow?

Here is an example as well: http://jsfiddle.net/Nx2nC/

possible duplicate http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — andrew, Sep 03 '13 at 14:51

David Thomas · Accepted Answer · 2013-09-03T14:50:56.457

I'd suggest using CSS animations:

@-mozilla-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-ms-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-o-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-webkit-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@keyframes newRowAdded {
    /* 'from' is that starting position/frame */
    from {
        background-color: #ffa;
    }
    /* 'to' is the final position/frame */
    to {
        background-color: #fff;
    }
}

.newrow {
                  /* first: the animation-name,
                     second: the animation duration (s for seconds): */
    -moz-animation: newRowAdded 2s;
    -ms-animation: newRowAdded 2s;
    -o-animation: newRowAdded 2s;
    -webkit-animation: newRowAdded 2s;
    animation: newRowAdded 2s;
}

JS Fiddle demo.

The, inevitable, down-side of using CSS animations is that older browsers, particularly, but not limited to, Internet Explorer, will be unable to implement this solution. To attend to those incompatible browsers, if you're willing, and able, to implement jQuery UI as well as jQuery itself:

$("#add").click(function (event) {
    event.preventDefault();
    $("#numlist tbody").prepend("<tr class='newrow'><td>somenum</td></tr>").find('.newrow:first').css('background-color', '#ffa').animate({
        'background-color' : '#fff'
    }, 2000);
});

JS Fiddle demo.

Note that jQuery itself cannot animate the color or background-color property of an element, jQuery UI, however, can. Though there's an alternate jQuery color plugin that also adds this facility, which may be more lightweight than adding the minimised (and only the relevant modules from) jQuery UI.

References:

'Using CSS animations,' at Mozilla Developer Network's CSS repository.

I should have mentioned..the table is already using `table-strippd` css property provided by twitter bootstrap. I think that is preventing it from only highlight alternate rows. Is there a way to aovid this? — Anthony, Sep 03 '13 at 14:50
That would've been helpful; can you update the supplied Fiddle to add the relevant CSS for those rows to implement the striping? Perhaps incorporating Twitter's Bootstrap library? — David Thomas, Sep 03 '13 at 14:53
Sorry about that. Here is an updated fiddle using bootstrap and the jQuery UI suggestion you gave: http://jsfiddle.net/GGMWX/652/ — Anthony, Sep 03 '13 at 15:07

Mkdgs · Answer 2 · 2013-09-03T15:16:02.613

1

you can use setTimeout() for removing the class

    var $el = $("#numlist").prepend("<tr class='newrow'><td>somenum</td></tr>");
    setTimeout(function() { $('.newrow',$el).removeClass('newrow')}, 1000);

and you can use css transition for the fading effect

.newrow {
   background-color: red;
   transition: background-color 1s linear;
}
tr {
  background-color: none;
  transition: background-color 1s linear;
}

http://jsfiddle.net/Nx2nC/13/

edited Sep 03 '13 at 15:16

answered Sep 03 '13 at 14:44

Mkdgs

167
2
11

1

He asked for the background color to fadeout, not disappear – andrew Sep 03 '13 at 14:49
He asked remove or fade in the background. this can be achieved with css transition http://jsfiddle.net/Nx2nC/12/ – Mkdgs Sep 03 '13 at 15:06
the question is titled "removing background color from prepended rows slowly" – andrew Sep 03 '13 at 15:09

maverickosama92 · Answer 3 · 2013-09-03T14:58:46.080

0

try this:

$("#add").click(function (e) {    
  e.preventDefault();
  var $tr = $("<tr/>",{"class":"newrow","html":"<td>somenum</td>"}).hide();

    $("#numlist").prepend($tr.show("slow"));
    setTimeout(function(){
        $tr.css("background-color","#fff")
    },1500);
});

working fiddle here: http://jsfiddle.net/Nx2nC/9/

edited Sep 03 '13 at 14:58

answered Sep 03 '13 at 14:41

maverickosama92

2,685
2
21
35

removing background color from prepended rows slowly

3 Answers3