1

An Example:

Here is an HTML example I have created: http://jsfiddle.net/Tgjnp/2/

The Question:

The CSS:

a {
    color: #bbb;
    text-decoration: none;
    margin-right: 2em;
    font-weight: bold;            
}

.green {
    color: green;                        
}

By the example, the set class is to get the fade animation, so the specified color fades in and out on mouse hover. Other than that, it should revert back to its default color.

The question is, how to have the hover color fade in and out?

Community
  • 1
  • 1
user1860822
  • 57
  • 9
  • If you're okay with using the jquery UI library, then check out: http://stackoverflow.com/questions/967815/how-do-you-fade-in-out-a-background-color-using-jquery or http://stackoverflow.com/questions/734068/fade-the-background-color-of-a-span-tag-with-jquery – E.Z. Hart Dec 15 '12 at 22:46

2 Answers2

0

You can't animate colors with plain jQuery. For that you have to use some sort of plugins, i.e. jQuery UI ( which is HUGE ) or the Color animation plugin

Alternatively you can use some simple CSS3 transitions - DEMO

This works awesome in newer browsers but not in older IE-s.

a {
    color: #bbb;
    text-decoration: none;
    margin-right: 2em;
    font-weight: bold;

    -webkit-transition: color .5s linear;   
       -moz-transition: color .5s linear; 
            transition: color .5s linear;    
}
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
0

There's a great explanation here. It doesn't use any fancy CSS3 magic, only JQuery. Just add the end and start colors, and JQuery will animate the transition.