addClass / removeClass Bug?

addClass / removeClass Bug?

So here's what Im trying to do:
I have a table with over 100 rows, and I am using mouseOver to change the class to 'highlight' the row.  I am trying to add some jQuery to make the highlight effect a little more aesthetically pleasing.

Here's the logic:
on <tr> mouse over
     change class to 'highlight'
on <tr> mouse out
      change class back to original with a slight fade

Here's some samples:
Youtube video of the issue
Link to working Demo

Here's the code:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  3. <style>
  4.       .color0
  5.       {border:none; background:#999999;}
  6.       .color1
  7.       {border:none; background:#bbbbbb;}
  8.       .highlight
  9.       {background:#A0D0F0;}
  10. </style>

  12. <script type="text/javascript">
  13.   $(document).ready(function() {
  14.     $("tr").mouseout(function () {
  15.       $(this).removeClass("highlight", 400);
  16.            });
  17.     $("tr").mouseenter(function () {
  18.       $(this).addClass("highlight", 40);
  19.            });
  20.   });

  22. </script>
  23. <tr align='center' class='color0'></tr>
  24. <tr align='center' class='color1'></tr>
It seems like the method I am using is not efficient enough to keep up with quick mouse movements. 

Is there a better way to do this?

Any help would be greatly appreciated.