jQuery

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:

$(elemento).animate(propiedadesCSS,duracion,easing,callback)

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:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#boton0").click(function(){
    $("body").animate({backgroundPositionX:"0px", backgroundPositionY:"0px"});
    });
 $("#boton1").click(function(){
          $("body").animate({backgroundPositionX:"500px"},5000);
    });
 $("#boton2").click(function(){
     $("body").animate({backgroundPositionY:"300px"},5000,function() {alert ('Efecto terminado!');});
    });
});
</script>

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:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#boton0").click(function(){
  $("#capa0").animate({outlineWidth:"15px"});
 });
 $("#boton1").click(function(){
  $("#capa1").animate({borderWidth:"10px"},3000);
 });
 $("#boton2").click(function(){
  $("#capa2").animate({borderBottomWidth:"20px"},5000,function() {alert ('Efecto terminado!');});
 });
 $("#boton3").click(function(){
  $("#capa3").animate({borderTopWidth:"15px"},function() {alert ('Efecto terminado!');});
 });
 $("#boton4").click(function(){
  $("#capa4").animate({borderLeftWidth:"10px", borderRightWidth:"20px"});
 });
});
</script>

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.

<span style="outline:1px solid black" id="capa0">Capa donde cambiaremos la propiedad outineWidth</span>
<input type="button" id="boton0" value="Cambiar a 15px el grosor del borde exterior del elemento">

<span style="border:1px solid black" id="capa1">Capa donde cambiaremos la propiedad borderWidth</span>
<input type="button" id="boton1" value="Cambiar a 10px el grosor del borde del elemento en 3 segundos">

<span style="border:1px solid black" id="capa2">Capa donde cambiaremos la propiedad borderBottomWidth</span>
<input type="button" id="boton2" value="Cambiar a 20px el grosor del borde inferior del elemento en 5 segundos y callback">

<span style="border:1px solid black" id="capa3">Capa donde cambiaremos la propiedad borderTopWidth</span>
<input type="button" id="boton3" value="Cambiar a 15px el grosor del borde superior del elemento y callback">

<span style="border:1px solid black" id="capa4">Capa donde cambiaremos la propiedad borderLeftWidth y borderRightWidth</span>
<input type="button" id="boton4" value="Cambiar a 10px el grosor del borde izquierdo y a 20px el derecho">

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:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#boton1").click(function(){
  $("#paraanimar").animate({margin:"0px"});
 });
 $("#boton2").click(function(){
  $("#paraanimar").animate({margin:"100px"});
 });
 $("#boton3").click(function(){
  $("#paraanimar").animate({marginBottom:"150px"},3000);
 });
 $("#boton4").click(function(){
  $("#paraanimar").animate({marginTop:"150px"},5000,function() {alert ('Efecto terminado!');});
 });
 $("#boton5").click(function(){
  $("#paraanimar").animate({marginLeft:"150px", marginRight:"150px"});
 });
});
</script>

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:

<p>Texto 1</p>
<p id="paraanimar">Texo 2 para animar</p>
<p>Texto 3</p>
<p>
<input type="button" id="boton1" value="Resetear">
<input type="button" id="boton2" value="Cambiar a 100px el margen del párrafo">
<input type="button" id="boton3" value="Cambiar a 150px el margen inferior del párrafo en 3 segundos">
<input type="button" id="boton4" value="Cambiar a 150px el margen superior del párrafo en 5 segundos y callback">
<input type="button" id="boton5" value="Cambiar a 150px el margen izquierdo y derecho del párrafo">
</p>

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:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#boton1").click(function(){
  $("#paraanimar").animate({padding:"0px"});
 });
 $("#boton2").click(function(){
  $("#paraanimar").animate({padding:"100px"});
 });
 $("#boton3").click(function(){
  $("#paraanimar").animate({paddingBottom:"150px"},3000);
 });
 $("#boton4").click(function(){
  $("#paraanimar").animate({paddingTop:"150px"},5000,function() {alert ('Efecto terminado!');});
 });
 $("#boton5").click(function(){
  $("#paraanimar").animate({paddingLeft:"150px", paddingRight:"150px"});
 });
});
</script>

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:

<p>Texto 1</p>
<p id="paraanimar" style="border:1px solid black;">Texo 2 para animar</p>
<p>Texto 3</p>
<p>
<input type="button" id="boton1" value="Resetear">
<input type="button" id="boton2" value="Cambiar a 100px el margen interno del párrafo">
<input type="button" id="boton3" value="Cambiar a 150px el margen interno inferior del párrafo en 3 segundos">
<input type="button" id="boton4" value="Cambiar a 150px el margen interno superior del párrafo en 5 segundos y callback">
<input type="button" id="boton5" value="Cambiar a 150px el margen interno izquierdo e interno derecho del párrafo">
</p>

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.

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#boton1").click(function(){
  $("#paraanimar1").animate({height:"100px"});
 });
 $("#boton2").click(function(){
  $("#paraanimar2").animate({width:"50px"},3000);
 });
});
</script>

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:

<p id="paraanimar1" style="border:1px solid black;">Texo1 para animar</p>
<p><input type="button" id="boton1" value="Cambiar a 100px la altura del párrafo"></p>

<p id="paraanimar2" style="border:1px solid black;">Texo2 para animar</p>
<p><input type="button" id="boton2" value="Cambiar a 50px el ancho del párrafo en 3 segundos"></p>

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:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#boton1").click(function(){
  $("#paraanimar").animate({bottom:"10px"});
 });
 $("#boton2").click(function(){
  $("#paraanimar").animate({left:"20px"},3000);
 });
   $("#boton3").click(function(){
  $("#paraanimar").animate({right:"200px"},5000,function() {alert ('Efecto terminado!');});
 });
 $("#boton4").click(function(){
  $("#paraanimar").animate({top:"10px"});
 });
});
</script>

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:

<p id="paraanimar" style="position:relative;">Párrafo para animar</p>
  
<p><input type="button" id="boton1" value="Asignar 10px a la propiedad bottom del párrafo"></p>
<p><input type="button" id="boton2" value="Asignar 20px a la propiedad left del párrafo en 3 segundos"></p>
<p><input type="button" id="boton3" value="Asignar 200px a la propiedad right del párrafo en 5 segundos y callback"></p>
<p><input type="button" id="boton4" value="Asignar 10px a la propiedad top del párrafo"></p>

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:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#boton1").click(function(){
  $("#paraanimar").animate({fontSize:"26px"});
 });
 $("#boton2").click(function(){
  $("#paraanimar").animate({letterSpacing:"8px"},3000);
 });
 $("#boton3").click(function(){
  $("#paraanimar").animate({wordSpacing:"20px"},5000,function() {alert ('Efecto terminado!');});
 });
 $("#boton4").click(function(){
  $("#paraanimar").animate({lineHeight:"8px"});
 });
 $("#boton5").click(function(){
  $("#paraanimar").animate({textIndent:"30px"});
 });
});
</script>

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:

<p id="paraanimar" style="position:relative;">Párrafo con texto para animar</p>
  
<p><input type="button" id="boton1" value="Asignar 20px al tamaño de letra del párrafo"></p>
<p><input type="button" id="boton2" value="Asignar 8px al espacio entre letras del párrafo en 3 segundos"></p>
<p><input type="button" id="boton3" value="Asignar 20px al espacio entre palabras del párrafo en 5 segundos y callback"></p>
<p><input type="button" id="boton4" value="Asignar a 8px la altura de línea del párrafo"></p>
<p><input type="button" id="boton5" value="Asignar una tabulación de inicio de párrafo de 30px"></p>