jQueryдеги animate методу

Азырынчага чейин карап чыккан бардык методдор бир аз чектүү - алар түз эле түзүлгөн нерселерди гана жасашат. Эгерде сизге анимацияга көбүрөөк көзөмөл керек болсо - универсалдык 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;
}