Curtis Henson - Quick Tip: List Hover Effect with jQuery

Quick Tip: List Hover Effect with jQuery

Posted Oct 01 2008

A while ago a user asked me how the widget hover effects were done in my Checkmate theme. Well I'm going to tell you. It is a little black magic, a little jquery, and passing through the outer realms of probability. But I think anyone can handle it.

First things last

First you'll need jQuery and the color animations plugin. Add these in your footer so they load last(that's just good practice).

The basic markup

The basic HTML for this example is something like the following.

Hover Magic

Now for the code that makes the hover actually work. Don't blink you might miss it.

That's it! Ok I'll explain a bit. The first two lines are setting up some variables, this makes the code a bit cleaner but you could include the variables directly if you wanted. The first variable is the original background color set in the CSS file. The second is the background color which will fade in.

If you're familiar with jQuery you'll know the third line includes the selector(".widget ul li"). Next is the actual animation. First the line items background color is faded to the whatever the fadeColor is set to. Next the background color is faded out to the original color before the mouse leaves. This is the effect I wanted, but if you want the color to fade out after the mouse pointer leaves then add the

.animate( {backgroundColor: originalBG}, 950)

line to the second empty function like so:

The End

That is just a quicky, there are a different effects you can easily get from adding more animation, colors, and timing. But I'll let you figure all that out.