Efectos jQuery - Animación


Con jQuery, puede crear animaciones personalizadas.



jQuery

Animaciones jQuery - El método animate()

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

Sintaxis:

$(selector).animate({params},speed,callback);

El parámetro params requerido define las propiedades CSS que se van a animar.

El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "lento", "rápido" o milisegundos.

El parámetro de devolución de llamada opcional es una función que se ejecutará después de que se complete la animación.

El siguiente ejemplo demuestra un uso simple del animate()método; mueve un elemento <div> a la derecha, hasta que alcanza una propiedad izquierda de 250px:

Ejemplo

$("button").click(function(){
  $("div").animate({left: '250px'});
}); 

De forma predeterminada, todos los elementos HTML tienen una posición estática y no se pueden mover.
Para manipular la posición, recuerde establecer primero la propiedad de posición CSS del elemento en relativa, fija o absoluta.



jQuery animate () - Manipular múltiples propiedades

Tenga en cuenta que se pueden animar varias propiedades al mismo tiempo:

Ejemplo

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
}); 

¿Es posible manipular TODAS las propiedades CSS con el método animate()?

¡Si casi! Sin embargo, hay una cosa importante que debe recordar: todos los nombres de propiedades deben estar en mayúsculas y minúsculas cuando se usan con el método animate(): deberá escribir paddingLeft en lugar de padding-left, marginRight en lugar de margin-right, y así sucesivamente.

Además, la animación en color no está incluida en la biblioteca principal de jQuery.
Si desea animar el color, debe descargar el complemento Color Animations de jQuery.com.


jQuery animate() - Uso de valores relativos

También es posible definir valores relativos (el valor es entonces relativo al valor actual del elemento). Esto se hace poniendo += o -= delante del valor:

Ejemplo

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
}); 

jQuery animate() - Uso de valores predefinidos

Incluso puede especificar el valor de animación de una propiedad como " show", " hide" o " toggle":

Ejemplo

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

jQuery animate () - Utiliza la funcionalidad de cola

Por defecto, jQuery viene con funcionalidad de cola para animaciones.

Esto significa que si escribe varias animate()llamadas una tras otra, jQuery crea una cola "interna" con estas llamadas de método. Luego ejecuta las llamadas animadas UNO por UNO.

Entonces, si desea realizar diferentes animaciones una después de la otra, aprovechamos la función de cola:

Ejemplo 1

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

El siguiente ejemplo primero mueve el <div>elemento a la derecha y luego aumenta el tamaño de fuente del texto:

Ejemplo 2

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
}); 

Ejercicios de jQuery

Ponte a prueba con ejercicios

Ejercicio:

Utilice el animate()método para mover un elemento <div> 250 píxeles a la derecha.

$("div").animate({: ''});


Referencia de efectos de jQuery

Para obtener una descripción general completa de todos los efectos de jQuery, vaya a nuestra Referencia de efectos de jQuery .