JQuery – #11. Animaciones

Unidad
Materiales

En la lección anterior aprendimos cómo crear efectos atractivos para incluirlos en nuestra página web haciendo uso de multitud de métodos.

En esta lección hablaremos del método .animate(), que tiene la siguiente sintaxis:

$(selector).animate({parametros}, [velocidad], [function_callback])

Donde parámetros definen las propiedades CSS que se quieren modificar; la velocidad, opcional, indica el tiempo que queremos que dure la animación y, como en el caso de los efectos, puede ser «slow», «fast», nuestra propia velocidad definida o un número de milisegundos; y la función callback, también opcional, indica la función que debe ser ejecutada una vez que se finaliza la animación.

Es importante entender que las sentencias Javascript se ejecutan una tras otra; pero en el caso de los efectos, la siguiente línea de código puede ejecutarse incluso si el efecto anterior no ha finalizado, por lo que pueden ocurrir errores. Para evitarlo usamos las funciones de callback que se ejecutan después de que el efecto actual haya finalizado.

En esta lección trabajaremos también con el método .stop(), que nos permite parar una animación creada en un momento dado. Este método, a su vez incluye dos parámetros opcionales: stopAll, un booleano que indica si queremos parar todos las animaciones de la cola; y goToEnd, que indica si queremos completar la animación actual inmediatamente y por defecto es falso.

Por último, veremos cómo podemos encadenar acciones y métodos para conseguir efectos más largos sin crear varias líneas de código. Hasta ahora habíamos escrito sentencias jQuery una a una, pero podemos encadenar varios métodos jQuery del mismo elemento utilizando una sola sentencia.

Veamos toda esto en el siguiente vídeo:

¡Consulta en la pestaña Materiales el código fuente trabajado en la lección!

¿No te ha quedado claro? ¿Quieres aportar tu punto de vista? ¡Deja tu comentario!

¡Ups! ¡Este contenido está restringido a codelovers! Inicia sesión o, si aún no eres miembro de Didacticode, regístrate!