Метад 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.