<table id="tbl">
  <tbody>
    <tr>
      <td>row 1</td>
    </tr>
    <tr>
      <td>row 2</td>
    </tr>
  </tbody>
</table>

tr:nth-child(odd) td {
  background-color: #ccc;
}

tr td {
  background-color: white;
}

tr td.animate {
  -webkit-transition-property: background;
  -webkit-transition-duration: 10s;
  -moz-transition-property: background;
  -moz-transition-duration: 10s;
  transition-property: background;
  transition-duration: 10s;
}

tr td.over {	
  background-color: red;
}

$(document).ready(function() {
  addHover($("td"));
  $("#insertRow").click(function() {
	var tbl = document.getElementById('tbl'),
	  newRow = tbl.rows[0].cloneNode(true);
    addHover(jQuery(newRow.childNodes[0]));
	tbl.rows[0].parentNode.insertBefore(newRow, tbl.rows[0]);
  });
});
var addHover = function(cells) {
  cells.hover(function(e) {
    var jqEl = $(e.target), timeoutId = jqEl.data("timeoutId");
    jqEl.removeClass("animate").addClass("over");
    if  (timeoutId) {
	  clearTimeout(timeoutId);
	  jqEl.data("timeoutId", null);
    }
  },
  function(e) {
    var jqEl = $(e.target);
    jqEl.addClass("animate");
    setTimeout(function() {
      jqEl.removeClass("over");
      jqEl.data("timeoutId", setTimeout(function() {
        jqEl.removeClass("animate");
      }, 10000));
    }, 0); 
  });
};