Animaciones con jQuery

Las animaciones han formado parte de los sitios web casi desde que estos representan un interés comercial, es tal el vínculo que se ha establecido, que es difícil recordar un sitio que no haya intentado vender o mostrar una innovación sin mostrarnos una animación, aunque claro existen sus excepciones muy marcadas, pero no todos somos un Google como para prescindir de ellas.

Si bien su implementación ha ido evolucionado, realizando animaciones a través de distintas formas de desarrollo, desde aquellos precarios gifs que intentaban darle dinamismo a un sitio pero terminaban aturdiendo al usuario, hasta la secuencia de acción desarrollada con flash, su propósito sigue siendo el mismo y se basa en entretener al usuario para que de alguna manera se logre llamar su atención.

Animaciones con Flash

Al mirar un sitio en Flash nos maravillamos con la gran cantidad de ideas que se hacen animación, grandiosos efectos, sincronización con canciones y sonidos, codificación y programación de botones, alta calidad de imágenes y estilización del sitio; todo esto nos hace querer aprender a programar en Flash de inmediato y comenzar a desarrollar esta clase de sitios, después de todo quien no puede considerar genial un sitio que se encuentra literalmente en movimiento constante.

Pero no todo es dulzura en el mundo de Flash, al momento de cargar un sitio desarrollado con esta tecnología nos damos cuenta que es muy demandante tanto para el servidor como para el cliente, el tiempo de respuesta hace meditar más de una vez antes de usarlo, y el hecho de buscar una optimización resulta casi imposible, ni hablar del SEO, una palabra mostrada en Flash no puede ser rastreado por muchos buscadores, el contenido se puede perder y un usuario no puede rastrear lo que tratamos de mostrarle.

Animaciones con JavaScript

Hasta hace unos años era prácticamente imposible pensar que JavaScript nos podía ofrecer la funcionalidad de crear animaciones, las dificultades que se presentaban al mostrar contenido en browsers con distinto motor y la lentitud de las implementaciones, hacían que el mostrar una animación fuera verdaderamente difícil.

Afortunadamente con el tiempo y la estandarización, se fue mejorando estos aspectos llegando los frameworks, que nos han permitido realizar animaciones con simples sentencias que utilizan el core de JavaScript para llevarlas a cabo.

Debemos aclarar que las animaciones con JavaScript son mucho más sencillas y menos complejas que las realizadas con Flash, claro no hay un limite que nos diga que no podemos explorar más allá y la imaginación e inteligencia de varios puede hacer maravillas con el uso de JavaScript, simplemente debemos decir que es mucho más común utilizar este lenguaje para animaciones sencillas del lado cliente.

Mostrar y ocultar elementos con jQuery

jQuery fue uno de los primeros frameworks que se preocupo por facilitar el acceso a las animaciones y entre los efectos dinámicos más comunes en su implementación esta el esconder y mostrar elementos que se encuentran en el DOM de nuestro sitio. Con el tiempo, en este manual, abarcaremos animaciones un poco más elegantes pero no hay mejor introducción que un efecto tan esencial como el mostrar y ocultar.

Los comandos jQuery para mostrar y ocultar elementos son bastante fáciles de recordar pues basta con saber las palabras mostrar y ocultar en ingles para aplicarlos. El comando “show()” para mostrar elementos y el comando “hide()” para ocultarlos, serán los encargados de llevar a cabo este efecto sin utilizar parámetro alguno.

Su aplicación es de la siguiente manera:

jQuery("#soyUnElemento").show();
jQuery("#soyUnElemento").hide();

Como se puede apreciar simplemente envolvemos un elemento o un conjunto y aplicamos la función. Estas funciones pueden llamarse desde alguna otra función, o mediante eventos como clicks, por ejemplo si quisiéramos que un elemento se oculte al momento de dar click sobre un conjunto abarcado por un clase, entonces haríamos algo como esto:

jQuery(".elementosClick").click(function(){ jQuery("#soyUnElemento").hide(); });

Si bien estos comandos son bastantes sencillos, hay que tener algunos factores en mente al momento de aplicarlos, como el hecho de que al momento de ocultar un elemento lo único que hace jQuery es cambiar el valor de la propiedad “display” de CSS a “none”, mientras que “show()” dará el valor de “block” a esta propiedad al momento de aplicarse.

Conclusión

Muchos consideran a las animaciones como algo extra, un lujo incluso, y si bien no están totalmente desubicados debemos aclarar que en estos tiempos realizar una animación no es demandante para el servidor y es muy fácil de realizar para el desarrollador, por lo que más que un capricho puede considerarse una herramienta que al final nos puede facilitar vender algún producto o darle un estilo único a nuestro sitio que le permita al usuario identificarlos sobre los demás.

Esta solo fue una pequeña introducción de lo que veremos más adelante en este manual, las animaciones con jQuery es un tema bastante interesante del cual trataremos de abarcar lo más posible, explicando a detalle aquellas animaciones que sean más útiles para nuestros sitios.