Методи 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;
}