automatically animate all hover states with jQuery

Question

On my new site, I have several different hover states for links. One swaps out a background image for the logo. One swaps out a different background image for the main nav. And normal inline links change background colors via CSS. I can't figure out a way to automatically have all a tags animate gracefully to their hover state.

It doesn't seem very clean (or future-proof) to manually code animation methods for each of these link types. It doesn't seem right to be putting my background image URLs and link colors (which should be in CSS) into JS. And it doesn't seem right to create a special class for each instance of a hover effect, then animate the addition/removal of that class via jQuery, when there could be a way to use the default a:hover behavior that CSS provides.

So I just wanted to know if there's some way to get jQuery (either with or without jQuery UI) to crossfade between the a and a:hover states that are already defined in my CSS. All of the a:hover states work as expected, but the transition is too sudden, and I want to add a fade transition between the hover/non-hover state of each element.

Any suggestions? Here's one example of CSS hover states where I'd like to animate the transition:

#logo a, #logo a:visited {
 background: url('logo_black.png');
}
#logo a:hover {
 background: url('logo_white.png');
}

Answer 1

The real way to do this is with CSS transitions (https://developer.mozilla.org/en/CSS/CSS_transitions), which allow the browser to handle all the animation between the two states for you.

However, these aren't yet supported in any browser other than Webkit (although they are slated for Firefox 4).

If you want them to work in other browsers you could look into using a jQuery plugin, such as: http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/

Personally, I would recommend not implementing them in JavaScript at all and let the browsers that don't support transitions degrade gracefully. Although you won't have great browser support today, you will over time, and with absolutely no extra effort on your part.

Progressive enhancement is a web developer's BEST friend. Particularly in this day and age of new technologies, new devices, and new browsers coming out every week.

Answer 2

I ended up going with something like this:

$('#logo, #left_nav li').css({ opacity: 0.6 }); 

$('#logo, #left_nav li').hover(function(){
    $(this).stop().animate();
    $(this).animate({ opacity: '0.99'}, 250);       
    },function(){
    $(this).stop().animate();
    $(this).animate({ opacity: '0.6'}, 250);        
});

The background image on these elements is 33% transparent.

I set opacity on each element to 0.6 (on document.ready) to get 20% transparency. The logo was modified to have a certain opacity relative to this value.

On hover, I set opacity back to the full value and animate the change. The logo fades in to 100% opacity, the background fades in to 33% opacity. Also some stop() code in there to prevent unwanted effect chaining.

I'll add something similar for inline text links. Not enough code to bother me, especially if there isn't a cleaner way to get the same effect on all links in jQuery.