Earlier this month, we posted a MooTools script that faded links to and from a color during the mouseover and mouseout events. My thought was ?why do a harsh a:hover color change when you can fade to that color?? Here is how to implement link color fading using jQuery.
Usage
/* plugin */
jQuery.fn.dwFadingLinks = function(settings) {
settings = jQuery.extend({
color: '#ff8c00',
duration: 500
}, settings);
return this.each(function() {
var original = $(this).css('color');
$(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
});
};
/* usage */
$(document).ready(function() {
$('.fade').dwFadingLinks({
color: '#008000',
duration: 700
});
});