how to highlight tables first row for 2 seconds and get back to original state

Question

I have a table in where once i add a row, its background color changes to show the changes (highlight will be good). Here is what i am doing

$("#tableDg tbody tr:first").css("background-color", "red")

So in order for the delay to work i did

$("#tableDg tbody tr:first").css("background-color", "red").delay(2000).css("background-color", "aqua");

but instead of delaying it just paints the bkg color to aqua, any comments what can i do here? Thanks

Answer 1

$("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua");
}, 2000);

To Add the highlight effect:

$("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua").effect("highlight", {}, 3000);
}, 2000);

Or this:

$("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua");
    $('#tableDg tbody tr:first').effect("highlight", {}, 3000);
}, 2000);

Answer 2

Maybe this will help: I added a data attribute to the row to highlight the one I want, so I named it data-id.

1. Get the original background color
2. Animate to the highlight color
3. wait 500 miliseconds
4. Animate to the original color (fade out)

5. Remove the style so the stylesheet can make its work.

   var highlight_color = "#fbec88";
   var original_color = $('#myTable tbody tr[data-id="' + id + '"]').css("background-color");
   
   $('#myTable tbody tr[data-id="' + id + '"]')
   .animate({
   'background-color': highlight_color
   }, 'slow', 'swing')
   .delay(500)
   .animate({
   'background-color': original_color
   }, 'slow', 'swing', function () { 
                       $('#myTable tbody tr[data-id="' + id + '"]').removeAttr("style"); 
                   });