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