jQuery animate()

Elmétodo jQuery animate() se utiliza para crear animaciones personalizadas.

Sintaxis de jQuery animate()

$(selector).animate({parámetros}, velocidad, función_de_llamada);

$(selector) es seleccionar el elemento html sobre el que se aplica este efecto de animación.

Los parámetros definen las propiedades css que se utilizan en la animación.

speed es un parámetro opcional, se utiliza para ajustar la velocidad de la animación. Puede ser en milisegundos o «lento» o «rápido».

callback_function es también un parámetro opcional, se pasa como un parámetro al método animate(). Se ejecuta cuando la animación ha terminado.

Ejemplo de jQuery animate()

En el siguiente ejemplo estamos animando un bloque de div usando el método animate(), hemos establecido las propiedades css del bloque de div dentro del método animate() y estamos llamando a este método dentro del evento de click de botón para que cuando se haga click en el botón, la animación se lleve a cabo.

Nota importante: Por defecto la posición de todos los elementos de una página html es «estática», lo que significa que no se pueden mover como hicimos en el ejemplo siguiente, así que para cambiar la posición durante la animación hay que establecer primero la posición del elemento html en relativa, fija o absoluta. En el siguiente ejemplo hemos establecido la posición en absoluta.

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("div").animate({ izquierda: '300px', ancho: '200px', alto: '200px' }); });});</script></head><body><h2>jQuery Animation example</h2><p>Este tutorial está publicado en beginnersbook.com. Aquí animaremos el siguiente bloque de div usando el método animate().Ajustaremos las propiedades css de este bloque usando animate()method.</p><button>Animate the block</button><div style="background:green;height:80px;width:120px;position:absolute;"></div></body></html>

Salida:
Antes de pulsar el botón:
jQuery animar


Después de hacer clic en el botón:
jQuery método animado

jQuery animate() usando valores relativos

También podemos usar valores relativos en el método de animación, por ejemplo la altura: ‘+=150px’, esto aumentará la altura actual con 150px cada vez que se ejecute el método de animación. Tomemos el mismo ejemplo que hemos visto arriba, dejemos que todo sea igual, sólo estamos cambiando la parte de jQuery (parte del guión).

Aquí estamos aumentando la altura y el ancho del bloque en 50px cada vez que se ejecuta el método animate(). Este método se ejecuta cuando hacemos clic en el botón. Como puedes ver en la salida, la altura y el ancho se incrementan en 50px cada vez que se hace clic en el botón.

$(document).ready(function(){ $("button").click(function(){ $("div").animate({ left: '100px', height: '+=50px', width: '+=50px' }); });});

Salida:
Antes de hacer clic en el botón:
jQuery animar usando valores relativos
Después de hacer clic en el botón:
jQuery animar usando el ejemplo de valores relativos
Se pulsa el botón una vez más:
jQuery animate() método valores relativos

jQuery animate() usando valores predefinidos

Podemos usar propiedades predefinidas como «mostrar», «ocultar» o « conmutar» en el método animate(). Tomemos el mismo primer ejemplo y cambiemos la parte de jQuery.

$(document).ready(function(){ $("button").click(function(){ $("div").animate({ width: 'toggle' }); });});

Salida:
Notará que cuando hace clic en el botón, el ancho del bloque verde disminuye gradualmente hasta cero y el bloque se vuelve invisible y cuando hace clic de nuevo en el botón, el ancho aumentará gradualmente desde cero hasta el ancho original del bloque.

jQuery queue múltiples métodos animate()

Cuando defines múltiples métodos de animación(), el jQuery los pone en cola en el orden dado para que la animación tenga lugar uno por uno

, esto trae un efecto realmente genial en la animación. Puedes hacer muchas más cosas con esta funcionalidad.

Por ejemplo

, defines un método animate() en el que configuras el tamaño de la fuente de un texto específico a grande y luego en el segundo método animate() configuras el tamaño de la fuente de ese mismo texto a normal, de modo que cuando esta animación tenga lugar, traerá un efecto emergente al texto que has resaltado usando el método animate(). Tomemos este ejemplo.

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ var para = $("p"); para.animate({fontSize: '3em'}, "slow"); para.animate({fontSize: '1em'}, "slow"); });</script></head><body><h2>jQuery Animation example</h2><p>BeginnersBook.com</p><botón>PopUp</botón></body></html>

Salida:
Al hacer clic en el botón PopUp, aumentará gradualmente el tamaño de la fuente del texto de BeginnersBook.com y luego lo reducirá gradualmente a su tamaño original, hemos logrado esto utilizando dos métodos de animación().
jQuery animar cola múltiples métodos de animación

❮ AnteriorSiguiente ❯

Rate this post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio