Efecto jQuery - método animate()

Manual de referencias de efectos de jQuery

Ejemplo

Cambiar la altura del elemento "div":

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Prueba por tu cuenta

Definición y uso

El método animate() ejecuta animaciones personalizadas de un conjunto de propiedades CSS.

Este método cambia el estado de un elemento de CSS de una condición a otra mediante estilos CSS. Los valores de las propiedades CSS se cambian gradualmente, lo que permite crear efectos de animación.

Sólo se pueden crear animaciones con valores numéricos (por ejemplo, "margin:30px"). Los valores de cadena no pueden crear animaciones (por ejemplo, "background-color:red").

Nota:Se utilizan "+=" o "-=" para crear animaciones relativas (animations relativas).

Sintaxis 1

$(selector).animate(Estilos,speed,easing,callback)
Parámetros Descripción
Estilos

Obligatorio. Define los estilos y valores de CSS que generan efectos de animación.

Posibles valores de CSS (proporcionados con ejemplos):

Nota:Los estilos CSS se utilizan con nombres de DOM (por ejemplo, "fontSize") en lugar de nombres de CSS (por ejemplo, "font-size")
speed

Opcional. Especificar la velocidad de la animación. El valor predeterminado es "normal"

Valores posibles:

  • milisegundos (por ejemplo, 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Opcional. Especificar la función de suavizado para establecer la velocidad de la animación en diferentes puntos de animación

Funciones de suavizado integradas:

  • swing
  • linear

El complemento de extensión proporciona más funciones de suavizado
callback

Opcional. Función a ejecutar después de que se complete la función animate

Para obtener más información sobre callback, visite nuestra jQuery Callback Este capítulo.

Gramática 2

$(selector).animate(Estilos,opciones)
Parámetros Descripción
Estilos Obligatorio. Especificar estilos CSS y valores que producen efectos de animación (como se muestra anteriormente)
opciones

Opcional. Especificar opciones adicionales para la animación

Valores posibles:

  • speed - Establecer la velocidad de la animación
  • easing - Función de suavizado a usar
  • callback - Función que se debe ejecutar después de que se complete la animación
  • step - Función que se debe ejecutar después de que se complete cada paso del animación
  • queue - Valor booleano. Indica si se debe colocar el animación en la cola de efectos. Si es false, la animación comenzará inmediatamente
  • specialEasing - de Estilos Mapeo de una o más propiedades CSS y sus funciones de suavizado correspondientes

Manual de referencias de efectos de jQuery