Animando tu sitio Web con jQuery

jQuery es una librería javascript que trae una serie de funciones prefabricadas, y que podemos usar en nuestro sitio Web para evitar, entre otras cosas, las animaciones Flash y los objetos embebidos en general.

Para usarlo, eso sí, hay que saber algo de javascript, en particular cómo se solucionan los problemas cuando nuestro código no funciona. Pero no es para alarmarse si no sabes nada de javascript, porque en jQuery por lo general los códigos para hacer cosas vienen listos, copiar y pegar.

Por ejemplo el siguiente código permite animar líneas de texto. Veamos:

• Línea uno 1
• Línea dos 2
• Línea tres 3

EN EL HEADER

La primera línea llama a la librería de jQuery en el servidor de Google. Es la versión 1.7.1 y ésta puede mejorar con el tiempo, así que mantente actualizado.

El estilo CSS da forma al HTML que pegaremos en la página.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
#ticker { height: 40px; overflow: hidden; margin: 0; padding: 0; }
#ticker li { height: 40px; }
</style>

EN TU PÁGINA

Este es el código HTML que mostrará la animación. Puedes agregar cuantos bullet quieras, teniendo en cuenta que la animación de jQuery solo mostrará uno a la vez.


<ul id="ticker">
<li style="display: list-item; ">Línea uno 1</li>
<li style="display: list-item; ">Línea dos 2</li>
<li style="display: list-item; ">Línea tres 3</li>
</ul>

ANTES DE </BODY>

Éste es el javascript que hace la magia. Llamamos a la librería en el HEADER del sitio, así que ahora podemos decirle al HTML cómo queremos que se anime.

Funciona así: toma el primer LI que esté dentro del tag con ID "ticker", lo eleva y baja al final el LI que queda escondido. La función se repite cada 5.000 microsegundos.


<script type="text/javascript">function tick(){
$('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
</script>