Needed to add a hover effect on some table rows and wanted to make it look nice. Think I managed to get it quite smooth in the end and thought I could share it.
// In the document ready event
// Attach handler
$('table tbody').delegate('tr', 'hover', hoverHandler);
// When mouse comes over
// Stop animation where it is
// Start fading up
// When mouse goes out
// Jump to end of animation
// Start fading down
You can check out a live version at samples.geekality.net/hover-effect
I would like to have used a class instead of a hard-coded color though. I tried to use addClass and removeClass, but with animation those proved to be quite buggy in this case. The problem with hard-coded colors is first of all that it generally is much better to collect styles in style-sheets than to have them spread out in other code. Secondly, doing it this way will override any background-color the rows might have had before you hovered over them.
A case where the second can ruin things a bit is if you have alternated background colors. This could be worked around if you take it into account in the handler though. Just for fun I tried to do just that: samples.geekality.net/hover-effect/alt.php
Note that this might not work so well if your table is dynamic (if you sort, add or remove rows for example). But anyways, looks pretty cool I think 😛