Método animate no jQuery

Todos os métodos que analisamos nas lições anteriores são um tanto limitados - eles fazem exatamente aquilo para o qual foram criados. Se você precisa de mais controle sobre a animação - use o método universal animate.

O primeiro parâmetro que este método aceita é um objeto, no qual você deve definir os novos valores das propriedades CSS que deseja animar. E o segundo parâmetro - o tempo de execução da animação.

Vamos implementar este método no seguinte código HTML:

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

Suponha que o CSS seja assim:

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

Vamos fazer com que, ao clicar no botão, o elemento se reduza para os seguintes tamanhos: altura - 50px, largura - 100px:

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

Se você definir o valor neste formato height: '+=50', a animação funcionará assim: ao valor atual da altura será adicionado 50px (no nosso caso) e o elemento será animado suavemente até o novo valor. Vamos ver um exemplo:

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

Para mais detalhes sobre o método animate, consulte a referência do jQuery.

animate

Existe esta marcação:

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

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

Faça com que, ao clicar na div com #block, sua largura aumente para 200px em 1100ms.

Use a marcação da primeira tarefa. Faça com que a cada clique na div com #block sua largura aumente 200px e cada aumento desses ocorra em 900ms.

Use a marcação da primeira tarefa. Faça com que a cada clique na div com #block, sua largura e altura aumentem 100px e cada aumento desses ocorra em 950ms.

Use a marcação da primeira tarefa. Faça com que a cada clique na div com #block, ela se mova para a direita em 100px e cada movimento desses ocorra em 700ms.