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:

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

Suponha que o CSS seja assim:

css#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:

javascript$('#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:

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

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

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

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