Un bonito efecto en los links o enlaces con JQuery

Esto es otro de los muchos efectos que podemos conseguir con JQuery. En este caso, conseguiremos que los enlaces del blog cambien de color al pasar el ratón lentamente.

Puedes ver un ejemplo del truco aquí, pasando el cursor por cualquier enlace que encuentres.

¿Te gusta el resultado? Si es así, sigue estos sencillos pasos:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade estos scripts encima:

<script src='http://jqueryui.com/latest/jquery-1.3.2.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() {
$(this).animate({ opacity: &#39;0.3&#39; } , 1000);
}, function() {
$(this).animate({ opacity: &#39;1&#39; }, 1000);
});
});
</script>

Los dos primeros scripts (jquery-1.3.2.js y jquery.min.js no tendrás que añadirlos una segunda vez si ya los tienes en la plantilla).

Guarda la plantilla para terminar:




Los colores que adoptarán los enlaces al pasar el cursor podrás personalizarlos en las siguientes líneas de CSS (las cuales pueden estar ya en tu plantilla):

a:link { color:#000000; text-decoration:none;}
a:active { color:#cccccc; outline: none;}
a:visited {color:#000000; text-decoration:none;}
a:hover { color:#cccccc; text-decoration: none;}

El código del color puedes reemplazarlo por el de cualquier otro, para ello utiliza la tabla de colores.

Si necesitas ayuda en cualquier otra cosa dímelo.