Método jQuery animate()
Ejemplo
"Animar" un elemento cambiando su altura:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Definición y uso
El método animate() realiza una animación personalizada de un conjunto de propiedades CSS.
Este método cambia un elemento de un estado a otro con estilos CSS. El valor de la propiedad CSS se cambia gradualmente para crear un efecto animado.
Solo se pueden animar valores numéricos (como "margin:30px"). Los valores de cadena no se pueden animar (como "background-color:red"), excepto las cadenas "mostrar", "ocultar" y "alternar". Estos valores permiten ocultar y mostrar el elemento animado.
Sugerencia: use "+=" o "-=" para animaciones relativas.
Sintaxis
(selector).animate({styles},speed,easing,callback)
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
Sintaxis alternativa
(selector).animate({styles},{options})
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
options | Optional. Specifies additional options for the animation. Possible values:
|
Pruébelo usted mismo - Ejemplo
Cómo usar animate() con una función de devolución de llamada que repite la animación.
de sintaxis alternativa Usar la sintaxis alternativa para especificar varios estilos y opciones de animación.
de progreso Cómo usar el método animate() para crear una barra de progreso.
Cómo usar animate() para agregar un desplazamiento suave a los enlaces.