jQuery: Nice and smooth hover effect

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 :P

  • JWebuser

    This is great!
    Thanks for your post. I guess I will use this hover effect. ;-)

  • priyavrat shukla

    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.

    • http://www.geekality.net Torleif

      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?

  • Partizan

    good job :)