animación de texto

[xinxan22]

Buenos días,
me gustaría animar un texto de la siguiente manera:


Cuando pase el ratón por encima (onmouseover) pase de un color blanco a un color negro.

Cuando quité el ratón de encima (onmouseout) pase de un color negro a un color blanco.

Tengo hecho lo siguiente:

Código HTML:

<script language="javascript">

contador=1;
vector_colores=new Array(6);

vector_colores[0]="#FFFFFF";
vector_colores[1]="#CCCCCC";
vector_colores[2]="#999999";
vector_colores[3]="#666666";
vector_colores[4]="#333333";
vector_colores[5]="#000000";

color_maximo=6;
color_minimo=-1;

valor_id="";

function colores(valor_id,tipo){
  //
  document.getElementById(valor_id).style.color=vector_colores[contador];
  //Tipo 1 -- suma; Tipo 2 -- resta
  if(tipo==1) contador++;
  else if(tipo==2) contador--;
  //
  if(contador==color_maximo) clearTimeout(tiempo1);
  else if(contador==color_minimo) clearTimeout(tiempo1);
  else tiempo1=setTimeout("colores('"+valor_id+"','"+tipo+"');",100);
}

</script>

<span id="id_texto" onmouseover="colores('id_texto','1');" onmouseout="colores('id_texto','2');" style="color: #FFFFFF; cursor:pointer; border-style:solid; border-color: #CCCCCC;">ESTE ES MI TEXTO</span>

Pero tengo un pequeño bug y es que si quito el ratón de encima (onmouseout) antes de que haya llegado al color negro (maximo_color=6) no funciona la animación inversa (de negro a blanco).

Imagino que tengo problemas con el setTimeout que se corta cuando hago el onmouseout..

Alguien puede ayudarme o decirme otro método de hacerlo?

Un saludo

[caricatos]

Hola:

Tal vez te ayude este enlace: Efecto fundido (fade)

Saludos