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).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.color.js"></script>

The basic markup

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

<div class="widget">
<h3>Widget Title</h3>
<ul>
       <li>Item One</li>
       <li>Item Two</li>
       <li>Item Three</li>
</ul>
</div>

Hover Magic

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

var originalBG = $(".widget ul li").css("background-color");
  var fadeColor = "#ddd"; 

$(".widget ul li").hover( function () {
    $(this).animate( { backgroundColor:fadeColor}, 450 )
    .animate( {backgroundColor:"#fff"}, 950 )
  },
  function () {}
  );

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:"#fff"}, 950)

line to the second empty function like so:

var originalBG = $(".widget ul li").css("background-color");
var fadeColor = "#ddd"; 

$(".widget ul li").hover( function () {
    $(this).animate( { backgroundColor:fadeColor}, 450 )
  },
  function () {
    $(this).animate( {backgroundColor:"#fff"}, 950 )
  }
  );

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.