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

table {
  border-collapse: collapse;
}

td {
  border: 0px;
  margin: 0px;
  padding: 0px;
  width: 3px;
  height: 3px;
}

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

tr td {
  background-color: white;
}

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

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

var addHover = function(cells) {
  cells.hover(function(e) {
    var jqEl = $(e.target), timeoutId = jqEl.data("timeoutId");
    jqEl.stop().addClass("over");
    if  (timeoutId) {
	  clearTimeout(timeoutId);
	  jqEl.data("timeoutId", null);
    }
  },
  function(e) {
    var jqEl = $(e.target);
	jqEl.animate({"backgroundColor":jqEl.parent().get(0).rowIndex % 2 === 0 ? "lightgrey" : "white"}, 10000, 'swing');
  });
};