Efectos de jQuery - Animación

El método jQuery animate() le permite crear animaciones personalizadas.

Demostración de efectos



jQuery

jQuery - método de animación animate()

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

Sintaxis:

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

Obligatorio params El parámetro define las propiedades CSS que forman la animación.

Opcional speed El parámetro especifica la duración del efecto. Puede tomar los siguientes valores: "slow", "fast" o milisegundos.

Opcional callback Los parámetros son el nombre del función que se ejecuta después de que finalice la animación.

A continuación, se muestra un ejemplo de aplicación simple del método animate(); mueve el elemento <div> a la izquierda hasta que la propiedad left sea igual a 250 píxeles:

Ejemplo

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

Prueba por ti mismo

Consejo:Por defecto, todos los elementos HTML tienen una posición estática y no se pueden mover.

Si desea operar con la posición, recuerde primero establecer la propiedad CSS position del elemento en relative, fixed o absolute!

jQuery animate() - Operación de múltiples propiedades

Tenga en cuenta que puede usar múltiples propiedades al generar animaciones:

Ejemplo

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

Prueba por ti mismo

Consejo:¿Puede usar el método animate() para operar todas las propiedades CSS?

Sí, casi puede! Sin embargo, hay que recordar una cosa importante: al usar animate(), debe escribir todos los nombres de las propiedades en notación CamelCase, por ejemplo, debe usar paddingLeft en lugar de padding-left, marginRight en lugar de margin-right, etc.

Además, las animaciones de color no están incluidas en la biblioteca jQuery nuclear.

Si necesitas generar animaciones de color, necesitas descargar el complemento de Animaciones de Color desde jQuery.com.

jQuery animate() - Uso de valores relativos

También puedes definir valores relativos (estos valores son relativos al valor actual del elemento). Necesitas agregar += o -= al frente del valor:

Ejemplo

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

Prueba por ti mismo

jQuery animate() - Uso de valores predefinidos

Incluso puedes establecer el valor de animación de las propiedades como "show", "hide" o "toggle":

Ejemplo

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

Prueba por ti mismo

jQuery animate() - Uso de la función de cola

Por defecto, jQuery ofrece la función de cola para animaciones.

Esto significa que si escribes múltiples llamadas a animate() una después de la otra, jQuery crea una "cola interna" que contiene estas llamadas a métodos. Luego ejecuta estas llamadas a animate una a una.

Ejemplo 1

Ocultar, si deseas ejecutar diferentes animaciones una después de la otra, debemos utilizar la función de cola:

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

Prueba por ti mismo

Ejemplo 2

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

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

Prueba por ti mismo