Método animate en jQuery

Todos los métodos que analizamos en las lecciones anteriores son algo limitados: hacen exactamente para lo que fueron creados. Si necesitas más control sobre la animación, usa el método universal animate.

El primer parámetro que este método acepta es un objeto, en el que debes establecer los nuevos valores de las propiedades CSS que deseas animar. Y el segundo parámetro es el tiempo de ejecución de la animación.

Implementemos este método en el siguiente código HTML:

<button id="button">click me</button>
<div id="elem">text...</div>

Supongamos que el CSS se ve así:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Hagamos que al hacer clic en el botón, el elemento se reduzca a las siguientes dimensiones: altura - 50px, ancho - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Si especificas el valor en este formato height: '+=50', la animación funcionará así: al valor actual de la altura se le sumará 50px (en nuestro caso) y el elemento será animado suavemente hasta el nuevo valor. Veamos un ejemplo:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Para más detalles sobre el método animate, consulta la referencia de jQuery.

animate

Hay un markup así:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Haz que al hacer clic en el div con #block su ancho aumente hasta 200px en 1100ms.

Usa el markup de la primera tarea. Haz que con cada clic en el div con #block su ancho aumente en 200px y cada aumento de este tipo ocurra en 900px.

Usa el markup de la primera tarea. Haz que con cada clic en el div con #block, su ancho y altura aumenten en 100px y cada aumento de este tipo ocurra en 950px.

Usa el markup de la primera tarea. Haz que con cada clic en el div con #block, se mueva a la derecha en 100px y cada movimiento de este tipo ocurra en 700px.