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.
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 
This is great!
Thanks for your post. I guess I will use this hover effect. ;-)
This is nice indeed. But i am trying to implement it in asp gridview.
Is this feasible in asp.net also?
Plz help me out.
Don’t have any experience with asp gridviews. Shouldn’t be impossible though? It’s just JavaScript acting on a table, so as long as the gridview is a table, it should work?