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.
Outdated: I wrote this in 2010. These days you should almost most definitely use CSS transitions instead 🙂
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // In the document ready event $(function() { // Attach handler $('table tbody').delegate('tr', 'hover', hoverHandler); }); function hoverHandler(event) { switch(event.type) { // When mouse comes over case 'mouseover': $(this) // Stop animation where it is .stop(true) // Start fading up .animate({backgroundColor:'#fd8'}, 'fast'); break; // When mouse goes out case 'mouseout': $(this) // Jump to end of animation .stop(true, true) // Start fading down .animate({backgroundColor:'transparent'}, 'slow'); break; } } |
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 😛