jQuery animate(): Animaciones modificando estilos CSS

Con jQuery animate() podemos hacer efectos de animación modificando las propiedades CSS de los elementos del DOM de nuestra web.

Hasta ahora habíamos visto una serie de acciones cerradas con las funciones fadeIn y fadeOut, show y hide, slideUp y SlideDown, addClass() y removeClass() y jQuery attr().

Pero con estas funciones nunca habíamos accedido a modificar CSS en tiempo real con jQuery. Con la función animate() podemos modificar CSS realizando animaciones, mientras que con la función css() podemos modificar u obtener valores de las CSS.

Propiedades CSS modificables por jQuery animate()

Según la documentación oficial las propiedades CSS que se pueden modificar con esta funcíon jQuery son (enumero por grupos de propiedades):

• Propiedades del fondo: backgroundPositionX y backgroundPositionY.
• Propiedades de bordes: outlineWidth, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth y borderSpacing.
• Los márgenes de elementos: margin, marginBottom, marginLeft, marginRight y marginTop.
• Los márgenes internos: padding, paddingBottom, paddingLeft, paddingRight y paddingTop.
• Altura y anchura: height, width, maxHeight, maxWidth, minHeight y minWidth.
• Coordenadas: bottom, left, right y top.
• Propiedades de párrafo: fontSize, letterSpacing, wordSpacing, lineHeight y textIndent.

Solo se puede aplicar  jQuery animate() a elementos cuyos valores son numéricos, tales como los mencionados anteriormente, por ejemplo, la propiedad ‘background-color‘ NO sería accesible por esta función.

Sintaxis de jQuery animate()

Os pongo la sintaxis:

Y os comento cada parámetro:

• elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
• propiedadesCSS (obligatorio): Propiedades de estilos CSS que queremos animar, los valores son los del listado anterior.
• duracion (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘, ‘slow‘ y ‘normal‘. Por defecto 400 milisegundos.
• easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘  (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
• callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado satisfactoriamente..

Ahora vamos con varios ejemplos de jQuery animate().

Ejemplos de jQuery animate() para modificar las coordenadas X, Y de los fondos

Vamos a cambiar la posición del fondo (background) en este primer ejemplo, las propiedades usadas son backgroundPositionX y backgroundPositionY:

Os comento el código fuente superior:

• Ejemplo de llamada básica: Cuando se detecta la pulsación de un botón con id ‘boton0‘ se cambian las coordenadas del fondo del elemento ‘body‘, el fondo se pone en las coordenadas 0,0 de la web.
• Ejemplo de llamada con duración: Cuando se hace click en el botón con id ‘boton1‘ el fondo del elemento ‘body‘ se mueve 500px a la derecha en un efecto que dura 5 segundos.
• Ejemplo de llamada con duración y callback: Con el click del botón con id ‘boton2‘ el fondo del elemento ‘body‘ se mueve 300px hacia abajo en un efecto que dura 5 segundos y al finalizar se hace un callback que saca un mensaje por pantalla.

Ejemplos de  jQuery animate() para modificar las pripiedades CSS de los bordes

En este segundo ejemplo vamos a modificar los valores CSS de los bordes, para ello vamos a usar las siguientes propiedades: outlineWidth, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth y borderSpacing:

Os explico el código de la segunda demo de ejemplo:

• Llamada básica: En el primer click modificamos el borde exterior de la capa a 15px.
• Llamada con duración: En el segundo click cambiamos a 10px el grosor del borde.
• Llamada con duración y callback: En el tercer click cambiamos a 20px el grosor del borde inferior con callback y una duración del efecto de 3 segundos.
• Llamada con callback: En el cuarto click modificamos el grosor del borde superior a 15px con callback final.
• Varias propiedades: En quinto lugar se cambian los bordes derecho e izquierdo a 10 y 20 pixels respectivamente, es una prueba para modificar varias propiedades a la vez (separadas por una ‘,’).
• NOTA: No he podido realizar un ejemplo de borderSpacing por la incompatibilidad con la maquetación de mi web. Esta propiedad está más inspirada en tablas.

Y aquí el código HTML de los botones y las capas.

Ejemplos de jQuery animate() para cambiar las propiedades CSS de los márgenes

En esta tercera demo de ejemplo se van a modificar los valores CSS de los márgenes de objetos, las propiedades usadas son: margin, marginBottom, marginLeft, marginRight y marginTop:

Explico el código por puntos:

• El primer click es para resetear las propiedades de la demo, así podéis volver a probarlas sin necesidad de recargar la página.
• Llamada básica: En el segundo click modificamos el margen del párrafo a 1o0px.
• Llamada con duración: En el tercer click cambiamos a 150px el margen inferior durante 3 segundos.
• Llamada con duración y callback: En el cuarto click cambiamos a 150px el margen superior con callback y una duración del efecto de 5 segundos.
• Varias propiedades: En quinto lugar se cambian los márgenes derecho e izquierdo a 150 pixels, es una prueba para modificar varias propiedades a la vez (separadas por una ‘,’).

El código de los párrafos y botones es el siguiente:

Ejemplos de jQuery animate() para modificar las propiedades CSS de los márgenes internos

En esta cuarta demo de ejemplo vamos a modificar los valores CSS de los márgenes internos, las propiedades usadas son: padding, paddingBottom, paddingLeft, paddingRight y paddingTop. Tal y como veréis la sintaxs es la misma que en la demo anterior, con la única diferencia de la propiedad:

Explico el código por puntos:

• El primer click es para resetear las propiedades de la demo, así podéis volver a probarlas sin necesidad de recargar la página.
• Llamada básica: En el segundo click modificamos el margen interno del párrafo a 1o0px.
• Llamada con duración: En el tercer click cambiamos a 150px el margen inferior interno durante 3 segundos.
• Llamada con duración y callback: En el cuarto click cambiamos a 150px el margen superior interno con callback y una duración del efecto de 5 segundos.
• Varias propiedades: En quinto lugar se cambian los márgenes internos de la derecha e izquierda a 150 pixels, es una prueba para modificar varias propiedades a la vez (separadas por una ‘,’).

El código de los párrafos y botones es el siguiente:

Ejemplos de jQuery animate() para modificar las propiedades CSS de altura y anchura

Nueva quinta demo de ejemplo para modificar el alto y ancho de las propiedades CSS. Las propiedades que usaremos son: height, width, maxHeight, maxWidth, minHeight y minWidth.

Os explico el código:

• Llamada básica: En el primer click modificamos la altura del párrafo a 100px.
• Llamada con duración: En el segundo click cambiamos a 50px el ancho del párrafo en 3 segundos.
• Respecto a las propiedades maxHeight, maxWidth, minHeight y minWidth no he realizado ejemplo, en las pruebas que he estado haciendo no se apreciaban las modificaciones como en todos los ejemplos que llevo haciendo.

El código HTML de los botones y párrafos es el siguiente:

Ejemplos de jQuery animate() para modificar la posición y coordenadas CSS

Con esta sexta demo vamos a modificar las coordenadas: bottom, left, right y top. De esta manera podremos mover elementos por la pantalla:

Os explico el ejemplo:

• Llamada básica: En el primer click modificamos el parámetro ‘bottom‘ y le asignamos el valor de 10px.
• Llamada con duración: En el segundo click cambiamos a 20px la propiedad ‘left‘ durante 3 segundos.
• Llamada con duración y callback: En el tercer click cambiamos a 200px el la propiedad ‘right‘ con callback y una duración del efecto de 5 segundos.
• Llamada básica: En cuarto lugar se cambia a 10px el parámetro ‘top‘.

El código del párrafo y los botones es el siguiente:

Ejemplos de jQuery animate() paramodificar los CSS de párrafo

En esta última demo vamos a modificar las propiedades de párrafo, los valores a usar son: fontSize, letterSpacing, wordSpacing, lineHeight y textIndent:

Os explico el código superior:

• Llamada básica: En el primer click modificamos el tamaño de letra a 26px.
• Llamada con duración: En el segundo click modificamos el espacio de caracteres a 8px en 3 segundos.
• Llamada con duración y callback: En el tercer click separamos las palabras con 20px con callback y una duración del efecto de 5 segundos.
• Llamada básica: En cuarto lugar se cambia la altura de línea a 8px.
• Llamada básica: En quinto lugar se establece una tabulación de párrafo de 30px.

El código HTML del párrafo y los botones es este:

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM