jQuery
jQuery .animate () Método
Buscar..
Sintaxis
- (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>");
}
});