Методи animate дар jQuery

Ҳамаи усулҳое, ки мо дар дарсҳои гузашта таҳлил кардем, то андозае маҳдуданд - онҳо айнан ҳамон кореро мекунанд, ки барояш сохта шудаанд. Агар ба шумо назорати бештар барои аниматсия лозим бошад - аз усули умумии animate истифода баред.

Ҳамчун параметри якум ин усул объектро қабул мекунад, ки дар он бояд қиматҳои нави хусусиятҳои CSS-ро муайян кунед, ки шумо мехоҳед аниматсия кунед. Ва ҳамчун параметри дуюм - вақти иҷрои аниматсияро.

Биёед ин усулро дар коди HTML-и зерин амалӣ кунем:

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

Бигзор CSS чунин намуд дошта бошад:

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

Биёед тавре созем, ки пас аз пахш кардан ба тугма элемент то андозаҳои зерин фишурда шавад: баландӣ - 50px, паҳнӣ - 100px:

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

Агар қиматро дар чунин формате муайян кунед height: '+=50', пас аниматсия чунин кор мекунад: ба қимати ҳозираи баландӣ 50px (дар ҳолати мо) илова карда мешавад ва элемент ба таври бад-бад то қимати нав аниматсия мешавад. Биёед ба мисол нигарем:

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

Барои маълумоти муфассал дар бораи усули animate ба дастури jQuery нигаред.

animate

Чунин верстка мавҷуд аст:

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

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

Чунон созед, ки вақте ки ба див бо #block пахш карда мешавад, паҳнии он то 200px афзун шавад, дар муддати 1100мс.

Аз верстакаи мавридаи якум истифода баред. Чунон созед, ки ҳар дафъаи пахш кардан ба див бо #block, паҳнии он ба 200px афзун шавад ва ҳар як чунин афзуниш дар муддати 900px рӯй диҳад.

Аз верстакаи мавридаи якум истифода баред. Чунон созед, ки ҳар дафъаи пахш кардан ба див бо #block, паҳнӣ ва баландии он ба 100px афзун шаванд ва ҳар як чунин афзуниш дар муддати 950px рӯй диҳад.

Аз верстакаи мавридаи якум истифода баред. Чунон созед, ки ҳар дафъаи пахш кардан ба див бо #block, он ба тарафи рост ба 100px ҷойиваз шавад ва ҳар як чунин ҷойивазшавӣ дар муддати 700px рӯй диҳад.