Метод animate в jQuery

Всички методи, които разгледахме в предишните уроци, са донякъде ограничени - те правят точно това, за което са създадени. Ако имате нужда от повече контрол върху анимацията - използвайте универсалния метод animate.

Първият параметър, който този метод приема, е обект, в който трябва да зададете нови стойности на CSS свойства, които искате да анимирате. А вторият параметър - времето за изпълнение на анимацията.

Нека реализираме този метод върху следния HTML код:

html<button id="button">click me</button>
<div id="elem">text...</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;
}