Метод animate у jQuery-у

Све методе које смо разматрали у претходним часовима су донекле ограничене - оне раде управо оно за шта су креиране. Ако вам треба више контроле над анимацијом - користите универзални метод animate.

Првим параметром овај метод прихвата објекат, у коме треба да задате нове вредности CSS својстава која желите да анимирате. А другим параметром - време трајања анимације.

Хајде да имплементирамо овај метод на следећем HTML коду:

<button id="button">кликни ме</button>
<div id="elem">текст...</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;
}

Направите да при клику на div са #block његова ширина порасне до 200px за 1100ms.

Користите изглед из првог задатка. Направите да при сваком клику на div са #block његова ширина порасте за 200px и свако такво повећање се дешава за 900ms.

Користите изглед из првог задатка. Направите да при сваком клику на div са #block његова ширина и висина порасту за 100px и свако такво повећање се дешава за 950ms.

Користите изглед из првог задатка. Направите да при сваком клику на div са #block, он се помери удесно за 100px и свако такво померање се дешава за 700ms.