O'Reilly

Fading Links Using jQuery: dwFadingLinks

By on  

UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works.

Earlier this week, I 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's how to implement link color fading using jQuery.

The jQuery JavaScript - Plugin & 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
	});
});

Track.js Error Reporting

Upcoming Events

Recent Features

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

  • Image Reflections with CSS

    Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...

Discussion

  1. I think this code has potential for abuse by the webmasters.

  2. Hahahaha. No way — webmasters couldn’t use this because they use applets for links.

  3. Hey, this doesn’t work for me! I went to the example and after a LONG delay the page came up. the links I use Firefox 3.03. I just went back to it and it works now…. Is there some sort of delay about Jquery kicking in???

  4. Whoops, just refreshed this page and saw the note about the JQuery site being down… Isn’t that a possible reason not to use JQuery??

  5. bob

    Awesome, how ever I would use $(this).stop().animate $(this).animate to make it a bit smother if you glide the mouse over.

  6. Could this be used to fade in a new background image too? Changing the color is nice, but having a background fade up would like much more striking.

  7. Alex

    Thanks a lot david. I think It’s time to move my projects to jQuery now :)
    Mootools is great, but jQuery is much easier for me.

    Note: this doesn’ t mean that I’ll stop visiting your blog :D

  8. Hey Dave!

    You haven’t mentioned the requirement for the UI effects core file which is needed in order for this to work at all. The jQuery core does not support color/backgroundColor animations by itself.

    Also, instead of using the whole UI core file you can get away with just using the color portion of it which extends the functionality of the “animate” method in order to make it work with color.

    @Dwight & Dave – If you’re not going to host jQuery yourself it’s best to link to it on GoogleCode: http://code.google.com/p/jqueryjs/

    And I kinda agree with Mark in that this could easily be abused – I like the effect but I can imagine it getting heavily overused by a beginner…

    Anyway, thanks for the tip Dave. :)

  9. ramiken

    Sexy script!

  10. Nice script but couldn’t figure out why the color and duration was used twice. In the end I took out this portion:

    settings = jQuery.extend({
    color: '#ff8c00',
    duration: 500
    }, settings);
    

    and it still worked fine..

  11. nice and simple

  12. stevelucky

    how would i add this to my site for ALL links? i have several classes and want this to apply to any text link regardless of class.

  13. Scott

    Very nice – I like this execution. Here’s a question: How could you keep the link you click to stay highlighted using this code?

  14. missy

    Doesn’t work in Chrome :(

  15. Jesse Skeens

    Not surprised, even simple radio buttons dont seem to work on Chrome.

  16. I really like this. However, when adding to a site I’m working on, as a progressive enhancement, I noticed a flaw: if a css :hover state is already declared for the links in question the fade-in only works on the second roll over (the initial roll over flicks to the hover state as it would normally). At least, it does in FFox and Opera – for once IE displays it correctly!!

  17. paolo

    hi, beautiful script. what i have to edit, to change background-color instead color? thanks

  18. Yeah I notice the same problem that rick has: “if a css :hover state is already declared for the links in question the fade-in only works on the second roll over (the initial roll over flicks to the hover state as it would normally). At least, it does in FFox and Opera”

    Does anybody know a fix for this?

  19. I love this script! Its exactly what I was hoping to find. I have noticed a small glitch though that sometimes the hover colour sticks, and if I go down a long list of links, a bunch of them will randomly stay lit. It can only be cleared if I hover over it again. I’ve tried to fix it myself but I’m no JavaScript coder and it just wasn’t happening for me.

    Anyway, thanks for making this script available :)

  20. Tony

    How can I add a jQuery command to fade in the CSS hover effect from the following CSS A:Hover actions? I wanted it to fade in to the CSS A:Hover definition, reason being, where I will use the JS code, I will not know the CSS code before hand and it can change dynamically, so all I know is that the A href will have hover properties.

    <style>
    A{
    Background: Red;
    Display: Block;
    Padding: 100px;
    }

    A:Hover{
    Background: Blue;
    }
    </style>

    <a href=”#”>Hover over me</a>

  21. Hi David,

    I am a scripting novice. Got everything working well on my site, just wondering how I can keep the link from pulsing when I roll over a few links in a row?

    Thanks!

  22. Danny

    Hey David,

    thanks for sharing this awesome simple code :D
    It works just fine on my website but I still have a few questions:

    1. As Scott mentioned before, is there a way to keep the link you clicked to stay highlighted?

    2. Some of the hover links stay lit, is there a way to fix this?

    Thanks
    Danny

  23. Is there some way to make this work with normal css :hover definitions ? Or atleast to over-ride them ? Because, i don’t want my links to be without any hover effect when JS is disabled.

  24. daniel

    For those who want the hover fade to stop part-way when the mouse leaves the link (before the fade has gone completely up), add this between the .mouseover(function) and the .mouseout(function):

    $(this).mouseleave(function() { $(this).stop(settings.duration); });
    

    So they should look like this together:

    $(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
    		$(this).mouseleave(function() { $(this).stop(settings.duration); }); 
    		$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
    

    That said, I’m a very novice scripter—this added line from me was little more than an educated guess.

  25. I’m kinda dumb, PLS do tell how the heck do I implement this ? where do I paste it how…..
    I’m loading the jQuery from google.
    Thanks so much !!!

  26. Marius

    How can i integrate this in phpbb3 ?

  27. Nick

    This is a nice script dave, but there are a few problems. If a hover state is defined in CSS the transition doesn’t work initially. If you don’t have a hover state defined and someone has JavaScript disabled then there is no hover state at all. This is problematic.

    Any work-around for a gracefully degrading version of this? It would also be nice if it just faded the CSS. Rather than defining it in the JS itself.

  28. Stefan

    I solved that hover problem for me. My links now have the class “css” with the ususal settings for color in case Javascript should be disabled.

    a { color: #000; }
    a.css:link { color: #000; }
    a.css:visited { color: #000; }
    a.css:hover { color: #25BAE2; }
    a.css:active { color: #000; }
    

    Then I tweaked daves script like this:

    	$(document).ready(function() {
    		$('a').removeClass("css");
    		$('.fade').dwFadingLinks({
    			color: '#25BAE2',
    			duration: 125
    		});
    	 });
    

    Now, if javascript is enabled, jQuery removes the class “css” from my links and thus disables the css-hover.

    Seems to work!

  29. Stefan

    Oh yeah, I´m a f00! Haha. That link should look like this

    link

  30. T Brendan

    Could anyone tell me if there is a way to tweak the javascript so that the fade in is instant (like a regular hover) but the fade out is the animated fade?

    Thanks!

  31. I have one problem, because when I insert the code, the effect is applied and the image-link … and it’s not good … but the effect is excellent. I do not know if I need something to change the js?

  32. This was a great post, thanks for the info.

  33. Hello, i think which i saw you frequented my own blog site so i found ???return the favor??à.I will be trying to find things to boost my personal web site!I guess its ok to utilize some of your ideas!!

  34. Gawl

    I’ve try to applied this to an image, but it’s not working. How can I make this works for images?

  35. Forsberg

    …or you just use css3:

    -moz-transition: color 0.7s ease-in 0s;
    
  36. Very nice info. Thanks for sharing

  37. Very effective – tested and works perfectly! With a little adjustment JS links really look nice on the website. Thank you.

  38. Cleaning JS code – Google did not make the problem W3Org validation is passed to the JS padding Links. A great thing.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Intercept HTTP Requests with Node.js nock

    Unit testing external APIs is difficult no matter what language you do it in.  Hell, working with any external API is scary, if only because you have zero control of networking issues, API changes, and a host of other issues.  But if you do create a service...

  • Introducing Frontend Masters (with Giveaway)

    Hey DWB readers, I'm super happy to sponsor this blog. I've been a long-time reader and fan, since back when David wrote about JavaScript and MooTools back in 2007. ;-) We are in one of the fastest changing, evolving, most lively communities on earth: JavaScript and front-end web...

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...