jQuery animate(): Animación de propiedades CSS

  • Por
  • 10 de mayo de 2010
  • Valoración:
  • 12 Comentarios
  • Frameworks Javascript
El método animate() de jQuery permite animar varias propiedades, con valores numéricos, de CSS en un solo paso.
Hemos avanzado bastante en el Manual de jQuery y con los conocimientos adquiridos hasta el momento ya estamos en disposición de aprender cualquier cosa más avanzada en este framework Javascript. Ha llegado el momento de dedicarnos a mostrar las maneras con las que podemos crear efectos para adornar nuestras páginas y hacer que la experiencia de uso sea más atractiva. En pasados artículos de DesarrolloWeb.com ya mostramos algunas maneras de hacer efectos sencillos en jQuery y en adelante vamos a explicar el funcionamiento de otros métodos, más complejos pero también más versátiles.

En el presente artículo vamos a comenzar a aprender cosas sobre el método animate(), uno de los más interesantes para hacer efectos en jQuery a partir de la modificación de propiedades CSS. Este método, como veremos, resulta bastante polivalente, pues con él podemos crear muchos tipos de animaciones, tantos como combinaciones de atributos CSS podemos tener. Sirve básicamente para ofrecer un listado de atributos CSS, con los nuevos valores a los que deseamos actualizarlos y jQuery se encargará de hacer esa modificación de manera que sea bastante suave.

Por ejemplo, tenemos un elemento con los atributos CSS width y height con valores "X e Y" y queremos animarlos para que esos atributos pasen a tener valores "Z y T" Con el método animate() podemos conseguir que esos atributos pasen de unos valores a otros sin cambios bruscos, y en lugar de ello lo hagan con una animación suavizada desde uno a otro valor.

Parámetros del método animate()

Para invocar al método animate() tenemos que indicar una serie de parámetros, aunque sólo uno de ellos será obligatorio. La lista es la siguiente:

.animate( Propiedades, [ Duración], [ Función de animación ], [ Callback ] )

Propiedades: Este es el único parámetro que de debe indicar obligatoriamente y es para indicar qué atributos CSS queremos actualizar, con sus nuevos valores. Se tiene que indicar en notación de objeto, de manera similar a como se puede indicar en el método css() de jQuery y sólo permite el cambio de propiedades CSS que tengan valores numéricos. Por ejemplo, podríamos cambiar la anchura de un borde, pero no el tipo de borde (si queremos que sea sólido, con línea de puntos, etc.) porque no tiene valores numéricos. Generamente, si no especificamos otra cosa los valores se entienden en píxeles. Los nuevos valores se pueden indicar de manera absoluta, o incluso de manera relativa, con un string del tipo "+=50", que indica que se debe aumentar en 50 ese atributo. En los ejemplos de este y siguientes artículos que publiquemos en desarrolloweb.com veremos varias maneras de indicar las propiedades para realizar varias animaciones.

Duración: Sirve para indicar la duración de la animación, en un valor numérico en milisegundos, o en un valor de cadena de caracteres como "fast" o "slow".

Función de animación: Esta función sirve para indicar cómo se realizará la animación, si más suave al principio y rápida al final, o igual de rápida todo el tiempo. Es decir, la velocidad con la que se realizará el cambio de valores en diferentes puntos de dentro de la animación. En principio, los dos posibles valores son "swing" (por defecto) y "linear".

Callback: Ofrece la posibilidad de indicar una función a ejecutarse cuando se ha terminado totalmente de producir el efecto. Es decir, una función que se invoca cuando se ha llegado al valor final de los atributos CSS que se solicitaron cambiar.

Ejemplo jQuery del método animate()

Para acabar vamos a ver un ejemplo del método animate(), pero bastante simplificado. En realidad sólo vamos a utilizar el primero de los parámetros, para indicar las propiedades CSS que deseamos animar.

Tendremos un titular en la página H1 con algunos atributos de estilos:

<h1 style="border-bottom: 1px solid #ff8800; font-size: 15pt;">Animacion jQuery</h1>

Nuestra animación hará que el borde del elemento pase a tener 20 píxeles de anchura y que el tamaño de la fuente suba para 25pt. Para ponerla en marcha utilizaríamos un código como el siguiente:

$("h1").animate({
   'border-bottom-width': "20",
   'font-size': '25pt'
});

Como se puede ver, en notación de objeto indicamos dos atributos CSS y los dos valores a los que queremos animarlos. El primero de los valores, que no tiene unidades, es considerado como píxeles. El segundo valor, que se indica en puntos (pt), hará que jQuery utilice ese tipo de unidades en vez de los píxeles.

Además, podemos fijarnos que en este caso a animate() sólo le hemos pasado unparámetro, con la lista de las propiedades CSS a animar. Por tanto, dejamos a jQuery que utilice los valores por defecto de tiempo de animación y función de animación.

Pero veamos una página que hace uso de ese método, con el código completo. Como veremos, en la página tendremos además dos enlaces, uno para poner en marcha la animación y otro para restaurar el CSS de los elementos a los valores originales. Así que, de paso que vemos como hacer un animate(), aprenderemos además a lanzar la ejecución de las animaciones como respuesta a eventos de usuario.

<html>
<head>
<title>Método animate jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
   $("#animar").click(function(e){
      e.preventDefault()
      $("h1").animate({
         'border-bottom-width': "20",
         'font-size': '25pt'
      });
   });
   
   $("#restaurar").click(function(e){
      e.preventDefault()
      $("h1").css({
         'border-bottom-width': "1",
         'font-size': '15pt'
      });
   });
})
</script>
</head>
<body>
<h1 style="border-bottom: 1px solid #ff8800; font-size: 15pt;">Animacion jQuery</h1>

Trabajando con el método animate:
<a href="#" id="animar">Animar</a>

<br>
<br>

Vuelvo a lo que había antes:
<a href="#" id="restaurar">Restaurar</a>

</body>
</html>

Este ejemplo puede verse en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

juan_carlos_garcia-98941

18/5/2010
Prevent Default
Me gustaria que comenten como funciona el prevent default.
Gracias
Saludos

sabrina1887

19/5/2010
JQUERY
GENIAL..EL MANUAL TA MUY BUENO

Alach007

19/5/2010
funcion preventDefault
la funcion preventDefault, tengo entendido su funcion es retener la accion predeterminada de un elemento, como ejemplo, en el caso de un enlance que este ligado a una pagina web, la funcion preventDefault no mandaria a la pagina web, por aqui hay un video donde queda muy explicado

Guillermo

20/5/2010
Animar utiliza .animate, y Restaurar utiliza .css
No se el por que de cambiar el metodo que se activa cuando se hace clic...
Y me he fijado en eso, por que el tamaño del borde no se pone a 1px cuando le das a restaurar. Solo cambia el tamaño de la letra.

Un saludo!

Luis

12/9/2010
CSS-Animate
El método Animate cambia los valores poco a poco. El método CSS los cambia súbitamente.

Me parece que funciona correctamente si se indica la unidad, es decir,
si en lugar de poner

'border-bottom-width': "1"

se coloca

'border-bottom-width': "1px"

fangosto.net

25/7/2011
Seguís enseñando fácil
Estoy leyéndome todo el Manual y no dejo de tener ideas sobre cómo aprovecharlo. Más fácil no se puede explicar. ¡felicitaciones!

epileftro

01/9/2011
Restaurar
Cuando se da click en el boton restaurar no restaura... soy nuevo llegando al JS y me gustaria que me explicaran... gracias

sprite

29/9/2011
Restaurar
Falta el método animate()

$("h1").animate({
'border-bottom-width': "1",
'font-size': '15pt'
});

Diseño Web

13/12/2011
Image Boom Demo
http://www.laqueva.com.ar/deepdemon/tarjetas-puevlo/index.php

ron

17/7/2012
thx
gracias por la explicaciòn

Mrtater

08/4/2013
Complicaciones con $:animate()
Estoy intentando hacer una animación con jquery .. y la verdad tengo un inconveniente .. intento hacer que tres box se muevan de izquierda a derecha la idea es que se muevan individual mente, es decir, primero uno, luego el otro y el otro. Pero no logro eso lo unico que logro es que se muevan los tres a la misma ves si alguien me podría atudar sera de agradecimiento. les dejo un ejemplo de lo que intento hacer gracias


HTML:
<div id="slideimage">

<img class="img1" src="img/box1.png" alt="643" title="100" class="ca_shown"/>
<img class="img2" src="img/box2.png" alt="699" title="150" />
<img class="img3" src="img/box3.png" alt="753" title="200" />

</div>

JS:

$(function(){

$('#slideimage img').each(function(){


var img=$(this);
var top= img.attr('title');
var left=img.attr('alt');
img.css('top',top+'px');
img.stop().animate(
{
left:left
},1000,function(){

img.removeClass('ca_shown');
next.addClass('ca_shown');

})


})
})



CSS:

#slideimage img{
position:absolute;
float:right;
height: 100px;
top:0;
left:1015px;




}
.ca_shown{
display:inline !important;
}

#slideimage{
float:right;
height:380px;
width:450px;
margin-top:45px;

}

ims1983

25/4/2013
y mover una div clciando en otro div
hola tengo un div cmenu que quiero mover de su posicion dando en otro div abrir pero solo hace la movimiento a la izquierda pero solo me coge el segundo animate si le doy otra vez al div abrir el div cmenu trendria que volver a la posicion inicial no se mueve dejo el codigo
jquery
haber si podeis ayudar

$(document).ready(function ()
{

$('#abrir').click(function()
{
$(".cmenu").animate({"left": "-124px"}, "slow");
},
function()
{
$(".cmenu").animate({"left": "0px"}, "slow");
}
);



});

Compartir