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

Има следен HTML:

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

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

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

Използвайте HTML от първата задача. Направете така, че при всяко натискане на div с #block неговата ширина да се увеличава с 200px и всяко такова увеличение да се извършва за 900px.

Използвайте HTML от първата задача. Направете така, че при всяко натискане на div с #block неговата ширина и височина да се увеличават с 100px и всяко такова увеличение да се извършва за 950px.

Използвайте HTML от първата задача. Направете така, че при всяко натискане на div с #block, той да се премества надясно с 100px и всяко такво преместване да се извършва за 700px.