Nice link colour fades using jQuery

As I’m sure you know, it’s very easy to set a different colour for a link when a user hovers over it using the :hover pseudo class – it’s used pretty much everywhere.

However, wouldn’t it be nice if instead of jumping sharply from one colour to another, the colours subtly fades from one to another and back again? Fortunately I have written a very simple plugin to do just that!

This plugin subtly fades from the default colour of the element to the specified colour when a user hovers over it, and back again when the user leaves the element.

Demonstration



EXAMPLE LINK 1
EXAMPLE LINK 2 – SLOW FADE BACK

Using the plugin

This plugin required the color animations official jquery plugin, available at http://plugins.jquery.com/project/color. This must be included on the page before the plugin is included.

To use the plugin, simple use the following code:

$('a').hoverFadeColor();

This will make all the links on a page fade to the color specified in the css:hover style and back again.

The options are as follows:

  • color:
  • fadeTospeed (default 300): the rate at which the element fades to the hover color
  • fadeFromspeed (default 700) is the rate at which the element fades to the default color

Download

Version 1.1. Released 29 June 2011


If you liked this article you might like to read the follow-up article, Detecting the :hover css selector style in jQuery/javascript.

About Alex Taylor

Roslin Design specialises in web design in Edinburgh. We offer competitively priced website design, and website hosting services. Roslin also provides web management services.
This entry was posted in jQuery. Bookmark the permalink.

9 Comments

  1. jose

    hi how are ya.

    Im using this in my website, any idea to implement it in divs? cool would be !

    bye

  2. Sean

    I’m pretty new to javascript coding. So should I include the jquery “color” script, and then your code in the head of the document? And then place:

    $(‘a’).hoverFadeColor();

    somewhere in the body of the document BUT before any links? is that right?

  3. sl

    Hi, im using this too, but some time function is stopping , color not fade .Maybe you know how eliminate this problem

  4. Jeff

    When you hover out from a visited link, the visited link color is replaced by the default link color. Is there any way to work around this?

  5. alemar

    Hi! Very useful script, thx! Is it compatible also with IE8? It seems not… :(

  6. Mike

    Thank you mate, I’ve been looking for something like this for ages!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>