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

td {
  -webkit-transition-property: background;
  -webkit-transition-duration: 10s;
  -moz-transition-property: background;
  -moz-transition-duration: 10s;
  transition-property: background;
  transition-duration: 10s;
  background-color: white;
}

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

tr td:hover {	
  -webkit-transition-property: background;
  -webkit-transition-duration: 1s;
  -moz-transition-property: background;
  -moz-transition-duration: 1s;
  transition-property: background;
  transition-duration: 1s;
  background-color: red;
}

$(document).ready(function() {
  $("#insertRow").click(function() {
    var tbl = document.getElementById('tbl'),
      newRow = tbl.rows[0].cloneNode(true);
    tbl.rows[0].parentNode.insertBefore(newRow, tbl.rows[0]);
  });
});