09-animaciones con jquery

El método 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 la completa la animación.

...

Codigo de ejemplo

Neste ejemplo, el metodo animate() hace que se mueva un elemento div hacia la derecha 250px

$("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.

---

Manipular múltiples propiedades

Con jquery se pueden animar varias propiedades al mismo tiempo:

Ejemplo de codigo

$("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 para recordar:

toda propiedad los nombres deben estar en mayúsculas y minúsculas cuando se usan con el método animate():

Deberá escriba paddingLeft en lugar de padding-left, marginRight en lugar de margin-right, y así sucesivamente.

la animación en color no está incluida en la biblioteca principal de jQuery.

Si desea animar el color, necesita descargar el Color Complemento de animaciones de jQuery.com.

---

Uso de valores relativos

Para usar valores relativos, se hace poniendo += o -= delante del valor:

ejemplo de codigo

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

---

Uso de valores predefinidos

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

Codigo del ejemplo

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

Utiliza la funcionalidad de cola

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

Esto significa que si escribe varias animate()se llama uno tras otro, jQuery crea una cola "interna" con estas llamadas a métodos. Luego ejecuta el animar llamadas UNO por UNO.

Entonces, si desea realizar diferentes animaciones una después de la otra, tomamos ventaja de la funcionalidad de la cola:

Ejemplo de codigo

$("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 seguiente ejemplo mueve el div hacia la derecha y luego aumenta la fuente del texto

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

HELLO

Ir al indice