Here's a simple UX trick that can be easily implemented into your web sites. With a few lines of jQuery it will make your text links fade to another color on rollover. How? Read on.
Take a look at the demo | Download color fading text links
Principle
The idea is similar to the one I already used for some other stuff. I wrote a script that selects links (A tags), places it's content in a SPAN with class name ".one" and adds a SPAN element with class name "two". SPAN "two" contains the same text as the A and is positioned absolutely right above the text link.
Initially the second SPAN is hidden. When the A is hovered the SPAN "two" fades in using jQuery's fadeTo effect, while SPAN "one" fades out. That creates smooth fading from one color into another.
Here's the entire script as I have it in my demo.
this.fadeLinks = function() {
var selector = "a"; //modify this line to set the selectors
var speed = "normal" // adjust the fading speed ("slow", "normal", "fast")
var bgcolor = "#fff"; // unfortunately we have to set bg color because of that freakin' IE *!$%#!!?!?%$!
//please use the same background color in your links as it is in your document.
$(selector).each(function(){
$(this).css("position","relative");
var html = $(this).html();
$(this).html("<span class=\"one\">"+ html +"</span>");
$(this).append("<span class=\"two\">"+ html +"</span<");
if($.browser.msie){
$("span.one",$(this)).css("background",bgcolor);
$("span.two",$(this)).css("background",bgcolor);
$("span.one",$(this)).css("opacity",1);
};
$("span.two",$(this)).css("opacity",0);
$("span.two",$(this)).css("position","absolute");
$("span.two",$(this)).css("top","0");
$("span.two",$(this)).css("left","0");
$(this).hover(
function(){
$("span.one",this).fadeTo(speed, 0);
$("span.two",this).fadeTo(speed, 1);
},
function(){
$("span.one",this).fadeTo(speed, 1);
$("span.two",this).fadeTo(speed, 0);
}
)
});
};
Of course, IE is causing issues so we have to apply a workaround. Because on fade the text in IE gets all chunky we have to set a background color to avoid that.
How to apply the script to your own site
Step 1 - JavaScript
Download the zip file containing my script and packed jquery library and place it somewhere on your site. I usually put all JavaScript files in a root directory called "/js". Then include following lines of code in order to link to jquery library and fading script js file.
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/fadeLinks.js"></script>
Step 2 - CSS
Add these lines to your CSS file. Note that I am using tag selectors because this is a demo. Style for A is the default and styling for SPAN is used when link is hovered.
a{
color:#f30;
font-weight:bold;
text-decoration:none;
}
a span.two{
color:#069;
cursor:pointer;
}
Step 3 - Modifications
Make sure that your CSS selectors are properly written so you can apply this script selectively. Otherwise it will apply to all A tags in your document. Modifying selectors must be done in CSS and in script as well. If you want to apply this effect to links inside your content div with id="content" then of course CSS should be written like this::
#content a{
color:#f30;
font-weight:bold;
text-decoration:none;
}
#content a span.two{
color:#069;
cursor:pointer;
}
In the fadeLinks.js the variable called selector should look like this:
var selector = "#content a";
In case you find your fading too slow or too fast you can adjust the variable called speed. Set it to "slow", "normal" or "fast".
The script is tested in FF, IE7 and Opera on Win and FF, Safari on Mac.
Sean McArthur 8 Dec, 2008
$('myEl').tween('color','#f00','#0f0') for example.
j4k3 8 Dec, 2008
Well, even in Safari this looks a little flickery, unsmooth. you should instead just change the color of the hovered span using a math function to interpolate the color over time. That will definitly perform much better. Or, if you use nested spans, you could at least swap something more spectacular than just the font-color.
j4k3 8 Dec, 2008
Tob 9 Dec, 2008
Allows for color transformation effects on text or anything.
Daniel 9 Dec, 2008
cssglobe 9 Dec, 2008
Tob 9 Dec, 2008
Dietmar 12 Dec, 2008
Cheers
Dietmar
ryan 16 Dec, 2008
I can't seem to figure out my problem. It seems when ever a line spills over into the next line below it, this fade effect causes the words to lose alignment. Any thoughts on this would be great.
http://dontforgetaboutmysite.com/fade.html
Thanks
Ryan
cssglobe 16 Dec, 2008
rohnn 19 Dec, 2008
you tried it on IE6 ?
The demo page with IE6.0.29 win XP-SP2... works fine with me.
Zach Dunn 27 Dec, 2008
@Tob Thanks for the plugin link.
Michele 25 May, 2009