Css Globe

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.