Buscar..


Sintaxis

  1. (selector) .animate ({styles}, {options})

Parámetros

Parámetro Detalles
propiedades Un objeto de propiedades y valores CSS que la animación moverá hacia
duración (predeterminado: 400) Una cadena o número que determina la duración de la animación
facilitando (predeterminado: swing) Una cadena que indica qué función de aceleración usar para la transición
completar Una función para llamar una vez que se completa la animación, llamada una vez por elemento coincidente.
comienzo Especifica una función para ser ejecutada cuando comienza la animación.
paso Especifica una función para ser ejecutada para cada paso en la animación.
cola un valor booleano que especifica si colocar o no la animación en la cola de efectos.
Progreso Especifica una función para ser ejecutada después de cada paso en la animación.
hecho Especifica una función para ser ejecutada cuando finaliza la animación.
fallar especifica una función que se ejecutará si la animación no se completa.
especialEasing un mapa de una o más propiedades CSS del parámetro de estilos, y sus correspondientes funciones de aceleración.
siempre especifica una función que se ejecutará si la animación se detiene sin completar.

Animación con devolución de llamada

A veces necesitamos cambiar la posición de las palabras de un lugar a otro o reducir el tamaño de las palabras y cambiar el color de las palabras automáticamente para mejorar la atracción de nuestro sitio web o aplicaciones web. JQuery ayuda mucho con este concepto usando fadeIn(), hide(), slideDown() pero su funcionalidad es limitada y solo realizó la tarea específica que se le asigna.

Jquery soluciona este problema proporcionando un método sorprendente y flexible llamado .animate() . Este método permite establecer animaciones personalizadas que se utilizan las propiedades de css que dan permiso para volar sobre los bordes. por ejemplo si damos propiedad de estilo css como width:200; y la posición actual del elemento DOM es 50, el método animar reduce el valor de la posición actual del valor css dado y anima ese elemento a 150. Pero no tenemos que preocuparnos por esta parte porque el motor de animación lo manejará.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").animate({width: "200px"});
    });
</script>

<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>

Lista de propiedades de estilo css que permiten el método .animate() .

backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing,  wordSpacing, lineHeight, textIndent, 

Velocidad especificada en el método .animate() .

milliseconds (Ex: 100, 1000, 5000, etc.), 
"slow", 
"fast"

Facilitación especificada en el método .animate() .

"oscilación"
"lineal"

Aquí hay algunos ejemplos con complejas opciones de animación.

Ej. 1:

$( "#book" ).animate({
  width: [ "toggle", "swing" ],
  height: [ "toggle", "swing" ],
  opacity: "toggle"
 }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
});

Ejemplo 2:

  $("#box").animate({
     height: "300px",
     width: "300px"
     }, {
     duration: 5000,
     easing: "linear",
     complete: function(){
        $(this).after("<p>Animation is complete!</p>");
     }
  });


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow