Saltar al contenido

¿Cómo Hacer Animaciones con jQuery?

10 junio, 2019

Antes de sumergirnos en el mundo de las animaciones utilizando jQuery, es necesario aclarar ciertos puntos básicos. Comenzando por el indispensable hecho de que estas animaciones no son las típicas que nos imaginamos. No se van a explicar cómo animar imágenes o fotografías en jQuery. Si no que, se van a tratar todas las posibles animaciones (aquellas que son más básicas) y efectos que se pueden atribuir. Ante los diferentes elementos que conforman una interfaz de usuario. A pesar de que esto no parezca de gran importancia, resulta indispensable al momento de desarrollar una plataforma web.

Esto se debe a que la manera en la que está establecida la interfaz de una página online, puede generar un impacto en el usuario. Siendo este positivo o negativo, dependiendo totalmente del balance entre información, elementos de interacción y animaciones o efectos de estos.

Características a Nuestra Disposición para las Animaciones

Es necesario dejar en claro que existen diferentes tipos de animaciones, y cada una de estas tiene diferentes cantidades de opciones controlables. Entre estas características que podremos modificar, incluimos el tiempo de duración y el efecto que se está buscando. Al igual que la función a ejecutarse al finalizar la animación.

Un modelo de este último sería el hecho de que un botón desaparezca, después de que el usuario haya hecho clic en él. Y que de igual manera, este botón envíe un mensaje con información al usuario. Además, contamos con la posibilidad de realizar un “mapa de objetos”.

Este mapa de objetos se realiza con la finalidad de definir las opciones avanzadas o particulares del efecto animado. Pero, este tipo de métodos suele ser aplicado solamente cuando necesitemos brindar propiedades exclusivas a un efecto animado que vayamos a utilizar.

Un ejemplo de este código al que nos referimos sería tal y como:

  • $(selector).efecto(duracion);
  • $(selector).efecto(duracion, funcionCallBack);
  • $(selector).efecto(funcionCallBack);
  • $(selector).efecto(mapaObjetos);

Pudiendo apreciarse que cada línea de este código o sintaxis corresponde a una posible característica que podamos aplicar a nuestra animación. Ahora, en esta particular ocasión solamente vamos a tratar las características más comunes. Esto se debe a que existe la posibilidad de que alguna animación posea características muy particulares.

Mostrar y Ocultar un Elemento

Podría decirse que el elemento, efecto o animación más utilizada por los desarrolladores web, es sin mostrar y ocultar. Esto se debe a que resulta de mucha utilidad para manejar los cambios en una interfaz. Aunado a que realmente es uno de los afectos más fáciles de aplicar.

Siendo el código a utilizar: “show() y hide()” tal y como sus nombres en inglés indican. Show: Mostrar y Hide: Ocultar. Manteniendo la posibilidad de aplicar cualquiera de estos efectos a nuestro DOM (Document Objet Model) o en otras palabras: Modelo de Objeto de Documento.

Alternar los Efectos o Estados de Mostar y Ocultar

Si como desarrollador deseas incluir los comandos de Mostrar y Ocultar en tu código, tanto por su utilidad como por la facilidad de su implementación. Entonces, también tendrás que estar interesado en poseer la capacidad de alternar un elemento entre estos dos estados o efectos de animación.

Para esto, utilizaremos el método: toggle() cuya función real es la de verificar el estado actual de un elemento. Pudiendo aplicar a este caso, que si dicho elemento se encuentra visible, lo ocultara; y si este está oculto, lo mostrara. Además, a este método podemos incluirle diferentes características de animación, como la duración y posibilidad de aplicar callBack.

¿Nos das 5 estrellas? ?