posted on:December 8, 2008

Fading color effect for inline text links using jQuery


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.

scheme

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.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (13 Comments)

  1. Sean McArthur
    December 8, 2008

    Why all the rick-a-maroo to Tween color? jQuery doesn't have a function for this? That's disappointing. Mootools easily does this with Fx.Tween. $('myEl').tween('color','#f00','#0f0') for example.

  2. j4k3
    December 8, 2008

    You're alpha blending nested spans for just changing the color? 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.

  3. j4k3
    December 8, 2008

    Thanks, Sean. This surely is the best solution. To just define a tween.

  4. Tob
    December 9, 2008

    http://plugins.jquery.com/project/color Allows for color transformation effects on text or anything.

  5. Daniel
    December 9, 2008

    I tried using the plugin in my wordpress blog, unzipped the files at the theme's directory and included them on header.php and added but it doesn't seem to work.. any tips?

  6. cssglobe
    December 9, 2008

    My bad! I should have investigate this topic more thoroughly. I don't this trick is complicated and actually I wasn't initially using it for changing colors. As jk43 said it can be used for something else.

  7. Tob
    December 9, 2008

    Be really cool for text shadow effects!

  8. Dietmar
    December 12, 2008

    Until IE6 is still used by many surfers I'm not really sure to use techniques that doesn't support this old buggy non coform browser. But this effect is still a nice feature I will keep in mind when the time comes that IE6 is really dead and gone. Cheers Dietmar

  9. ryan
    December 16, 2008

    Hi, 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

  10. cssglobe
    December 16, 2008

    @Ryan, this trick can't work with wrapping text. I suggest using shorter links and put white-space:no-wrap; for the anchors.

  11. rohnn
    December 19, 2008

    @Dietmar you tried it on IE6 ? The demo page with IE6.0.29 win XP-SP2... works fine with me.

  12. Zach Dunn
    December 27, 2008

    This is an interesting solution. I'd think that jQuery will have to get that integrated to the main library soon like mooTools. @Tob Thanks for the plugin link.

  13. Michele
    May 25, 2009

    Hi, how can I set it to alternate the two colors without mouse over&out but automatically? thank you :)

Sorry, the comment form is closed at this time.