Метод animate у jQuery-у

Све методе које смо разматрали у претходним часовима су донекле ограничене - оне раде управо оно за шта су креиране. Ако вам треба више контроле над анимацијом - користите универзални метод animate.

Првим параметром овај метод прихвата објекат, у коме треба да задате нове вредности CSS својстава која желите да анимирате. А другим параметром - време трајања анимације.

Хајде да имплементирамо овај метод на следећем HTML коду:

html<button id="button">кликни ме</button>
<div id="elem">текст...</div>

Нека CSS изгледа овако:

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

Хајде да урадимо да се при клику на дугме елемент скучи до следећих димензија: висина - 50px, ширина - 100px:

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

Ако наведете вредност у оваквом формату height: '+=50', онда ће анимација радити овако: тренутној вредности висине ће се додати 50px (у нашем случају) и елемент ће се глатко анимирати до нове вредности. Погледајмо на примеру:

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

Више о методу animate погледајте у речнику jQuery.

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

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