Efecto de desvanecimiento en Link Hover?

En muchos sitios, como http://www.clearleft.com , notará que cuando los enlaces se ciernen, se desvanecerán en un color diferente en lugar de cambiar de inmediato, la acción predeterminada.

Supongo que JavaScript se usa para crear este efecto, ¿alguien sabe cómo?

Hoy en día, las personas solo usan transiciones CSS3 porque es mucho más fácil que jugar con JS , el soporte del navegador es razonablemente bueno y es simplemente cosmético, por lo que no importa si no funciona.

Algo como esto hace el trabajo:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

También puede hacer una transición de propiedades CSS específicas con diferentes tiempos y funciones de facilitación separando cada declaración con una coma, así:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

Demo aquí

Sé que en la pregunta que dice "Supongo que JavaScript se usa para crear este efecto", pero CSS también se puede usar, a continuación se muestra un ejemplo.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
}

HTML

<a class="fancy-link" href="#">My Link</a>

¡Y aquí hay un JSFIDDLE para el código anterior!

Marcel en una de las respuestas señala que puede "hacer la transición de varias propiedades CSS", también puede usar "all" para efectuar el elemento con todos sus estilos: hover como a continuación.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
   padding-left: 10px;
}

HTML

<a class="fancy-link" href="#">My Link</a>

¡Y aquí hay un JSFIDDLE para el ejemplo de "todos"!

Puedes hacer esto con JQueryUI:

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/

Prueba esto en tu CSS:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}