Метод animate

Методът animate позволява създаването на анимационни ефекти за различни CSS свойства. Единственият задължителен параметър - обект с CSS свойства, подобен на този, който предаваме на метода css. Много свойства, които имат нечислови стойности или няколко стойности не могат да бъдат анимирани с базовия функционалност на jQuery (например background-color). Също така не винаги се поддържат съкратени названия на CSS свойства, например font - вместо това трябва да се използва fontSize или font-size. Пред стойностите може да се постави '+=' или '-=', в такъв случай посочената стойност ще бъде добавена или извадена от текущата стойност на свойството. Също така вместо числови стойности може да се постави show, hide или toggle. Всички jQuery ефекти, включително animate, могат да бъдат изключени глобално, като се използва настройката jQuery.fx.off = true, която задава стойност на продължителността от 0.

Синтаксис

Първият параметър на анимацията се предава обект с CSS свойства и техните стойности във формат ключ: стойност, които ще бъдат анимирани. Останалите параметри се считат за незадължителни. Вторият параметър - определя продължителността на анимацията в милисекунди, 400мс по подразбиране. Третият параметър е функция за плавност на прехода (по подразбиране това е swing), както и четвъртият - callback функция, която ще се изпълни след завършване на анимацията:

.animate(properties, [duration ], [easing ], [callback ]);

Времето може да се задава не само в милисекунди, но и с ключови думи slow (600мс) и fast (200мс), колкото по-голяма е стойността, толкова по-бавна е анимацията. Може като втори параметър да се предадат на метода различни опции, под формата на JavaScript обект, съдържащ двойки ключ: стойност:

.animate(properties, options);

Например, нека зададем за CSS свойствата width и height стойност toggle. Продължителност на 5000мс, функциите за плавност ще предадем като обект, за ширината това ще бъде линейна функция, а за височината - easeOutBounce, също така при завършване на анимацията ще се изпълни веднъж функцията (виж ключа complete), която след елемента с #test ще постави div с надпис 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

По-долу в таблицата са показани свойствата и методите на обекта options и тяхното описание:

Име	Описание
`duration`	Продължителност на анимацията в милисекунди - низ или число. `400мс` по подразбиране.
`easing`	Определя коя функция за плавност да се използва. `swing` по подразбиране.
`queue`	Булева стойност или низ. `true` по подразбиране. Посочва дали да се постави анимацията в опашка. При стойност `false` анимацията ще започне незабавно. Ако параметърът се подаде като низ, тогава анимацията ще бъде поставена в опашка, представена от този параметър. При използване на опашка с потребителско име, анимацията няма да започне автоматично, за да я стартирате - използвайте `dequeue('queuename')`.
`specialEasing`	Тук можете да предадете обект, в който ключовете са CSS свойства, а стойностите - съответните им функции за плавност.
`step`	Функция, която се извиква за всяко анимирано свойство на всеки анимиран елемент. Тя позволява модифицирането на `Tween` обект, за да се промени стойността на свойството преди то да бъде зададено. Като параметри приема текущата стойност на `tween` и `Tween` обекта.
`progress`	Функция, извиквана след всяка стъпка от анимацията, само по веднъж за всеки елемент независимо от броя на анимираните свойства. Функцията приема три параметъра `animation` (под формата на promise), `progress` (число от `0` до `1`) и `remainingMs` (число на оставащите милисекунди).
`complete`	Функция, извиквана веднъж след приключване на анимацията на елемента. Функцията приема `animation` (под формата на promise).
`start`	Функция, която се извиква, когато анимацията на елемента започва. Функцията приема `animation` (под формата на promise) и `jumpedToEnd` (Булева стойност. Ако `true`, тогава анимацията автоматично се завършва).
`done`	Функция, която се извиква, когато анимацията на елемента приключи (нейният promise е изпълнен успешно). Функцията приема `animation` (под формата на promise) и `jumpedToEnd` (Булева стойност. Ако `true`, тогава анимацията автоматично се завършва).
`fail`	Функция, която се извиква, когато анимацията на елемента завършва с грешка (нейният promise е изпълнен с грешка). Функцията приема `animation` (под формата на promise) и `jumpedToEnd` (Булева стойност. Ако `true`, тогава анимацията автоматично се завършва).
`always`	Функция, която се извиква, когато анимацията на елемента завършва или спира без завършване (нейният promise е изпълнен успешно или с грешка). Функцията приема `animation` (под формата на promise) и `jumpedToEnd` (Булева стойност. Ако `true`, тогава анимацията автоматично се завършва).

Пример

Нека при натискане на бутона #left да преместваме зеления квадрат наляво, а при бутона #right надясно с 50px, също така да зададем продължителност на 600мс - с командата slow:

<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Вижте също

метод show,
който плавно показва елементи
метод stop,
който позволява спиране на стартирана анимация
метод delay,
който задава забавяне на изпълнението на събития
свойство jQuery.fx.off,
което позволява глобално изключване на анимацията
селектор animated,
който избира елементи, които в дадения момент са задействани в анимация