efectos jQuery - animación

jQuery nos permite crear animaciones personalizadas.

animaciones jQuery-método animate()

jQuery animate()método que ejecuta animaciones personalizadas para un grupo de propiedades CSS.

Esto esanimate()Sintaxis del método:

$(selector).animate({styles},　duration,　easing,　callback)

Parámetros:

• {styles} -Especificar el objeto de CSS propiedades y valores a los que se moverá la animación

• duración -Determina cuánto tiempo durará el efecto de animación. Valores posibles: "slow", "fast" o milisegundos

• easing -Indica la función de suavizado a usar para la transición. Valores posibles: "swing", "linear"

• callback-Especificar la función a llamar después de que se complete el método animate()

El siguiente ejemplo cambia el ancho del elemento para establecer una animación:

$("button").click(function(){
　　$("div").animate({width:　"500px"});
});

El siguiente ejemplo anima el elemento mediante el cambio de su posición:

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

animate() de jQuery-Establecer múltiples atributos

También podemos establecer animaciones para varios atributos de un elemento al mismo tiempo.

$("button").click(function(){
　　$("div").animate({
　　　　width: "500px",
　　　　height: "400px",
　　　　opacity: 0.3,
　　　　left: "50px"
　　});
});

El siguiente ejemplo utiliza animate() para demostrarduraciónyeasingParámetros:

$("button").click(function(){
　　$("div").animate({
　　　　width: "500px",
　　　　height: "400px"
　　},　4000, "linear");
});

El siguiente ejemplo utiliza animate() para demostrarCallbackParámetros:

$("button").click(function(){
　　$("div").animate({
　　　　width: "500px",
　　　　height: "400px"
　　},　500, "linear",
　　function() {
　　　　$(this).after("<h2>La animación se ha completado</2">
　　});
});

animate() de jQuery-Uso de animaciones en cola

Por defecto, jQuery tiene la función de cola de animación.

En la cola, una o más funciones esperan ejecutarse.

Esto significa que si escribes múltiples llamadas a animate() una después de la otra, jQuery crea una "cola interna" con estas llamadas. Luego, ejecuta una llamada de animación a la vez.

El siguiente ejemplo cambia primero el ancho del elemento DIV, luego la altura y finalmente aumenta el tamaño de la fuente del texto:

$("button").click(function(){
　　let div = $("div");
　　div.animate({width: "500px"});
　　div.animate({height: "200px"});
　　div.animate({fontSize: "10em"});
});

Podemos usar la función de enlace de jQuery para animar varios atributos de un elemento en una cola.

$("button").click(function(){
　　$("div")
　　　　.animate({width: "500px"})
　　　　.animate({height: "200px"})
　　　　.animate({fontSize: "10em"})
　　　　.animate({opacity: 0.3});
});

Obtendrá más información sobre los enlaces en la parte posterior de este tutorial.

animate() de jQuery-Uso de valores relativos

Las propiedades de animación también pueden ser relativas. Si se proporciona un valor con un precursor+O-Si se proporciona una secuencia de caracteres igual a un atributo, se calcula el valor objetivo sumando o restando el número dado al valor actual del atributo.

$("p").click(function(){
　　$(this).animate({
　　　　fontSize: ""+=5px",
　　　　padding: ""+=10px"
　　});
});

animate() de jQuery-Uso de valores predefinidos

Además, podemos especificar el valor de animación de la propiedad "show", "hide" o "toggle":

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

Referencia de efectos de jQuery

Para obtener información completa sobre los efectos, visite nuestraManual de referencia de efectos de jQuery。