Question

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?

Answer 1

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;    
}