La función animate() de jquery nos sirve para crear animaciones, transformando los elementos HTML de nuestro sitio web. Su funcionalidad se basa en: realizar una transformación del elemento recibiendo el estilo final (CSS) que tendrá nuestro objeto, alguna acción (reducir de tamaño, desaparecerlo) y en que tiempo se realizara el efecto.
Algo que vale la pena recordar, es que siendo una función de jquery, esta función tiene un parámetro al final para ejecutar un callback, y así podemos realizar varias animaciones en secuencia.
Para comprender la función muestro el siguiente ejemplo, en el cual línea por línea explico que es lo que realiza:
Código HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animate</title>
<script src="../scripts/jquery.js"></script>
</head>
<body>
<input type="button" value="inicia" onclick="inicia();" />
<div style="width:100px; position:relative; height:100px; background:#060;"></div>
<br />
</body>
</html>
Código Jquery
$("div")
.animate({ //seleccionamos el div
opacity: 0.25, //dismunuye la opacidad del objeto
left: "+=100", //aumenta la posicion en horizontal del objeto a 100 px
height: "toggle" //oculta el objeto
}, 2000 //la animación se realiza en 2 segundos
,
function() { //ejecutamos un callback con función anonima para regresar a la normalidad el objeto
$("div").animate({ //seleccionamos nuevamente el div
opacity: 1, //regresa la opacidad del objeto a normal
left: "-=100", //dismunuye la posicion del objeto menos 100 px
height: "toggle" //aparece el objeto
}, 1000 //tiempo de 1 segundo
, inicia //el callback ejecuta la funcion inica para volver a comenzar todo
)
})
}
Ejemplo en ejecución
El código anterior, al presionar el botón inicia, realiza una animación y ejecuta un callback para regresar el div a su estado original.
Utilizando animate() podemos realizar todo tipo de animaciones a nuestros elementos HTML, recomiendo que la utilicen e intenten realizar cosas por si solos en lugar de bajar cosas ya hechas, esto les ayudara a comprender como funcionan los plugins de jquery y les dará facilidad para modificarlos o crear los plugins propios (creación de plugins de jquery, el siguiente curso que estoy por hacer).
Ir al Capitulo Siguiente (10.- Creación de Elementos HTML con Jquery).