Метад 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(уласцівасці, [працягласць ], [функцыя плаўнасці ], [callback-функцыя ]);

Час можна задаваць не толькі ў мілісекундах, але і ключавымі словамі slow (600мс) і fast (200мс), чым больш значэнне, тым павольней анімацыя. Можна другім параметрам перадаць метаду розныя опцыі, у выглядзе аб'екта JavaScript, які змяшчае пары ключ: значэнне:

.animate(уласцівасці, options);

Напрыклад, усталюем для CSS-ўласцівасцей width і height значэнне toggle. Працягласць на 5000мс, функцыі плаўнасці перададзім у выглядзе аб'екта, для шырыні гэта будзе лінейная функцыя, а для вышыні - easeOutBounce, таксама па завяршэнні анімацыі ў нас адзін раз выканаецца функцыя (гл. ключ complete), якая пасля элемента з #test размясціць дыў з надпісам '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` (у выглядзе промасу), `progress` (лік ад `0` да `1`) і `remainingMs` (лік які застаўся мілісекунд).
`complete`	Функцыя, якая выклікаецца адзін раз пасля заканчэння анімацыі элемента. Функцыя прымае `animation` (у выглядзе промасу).
`start`	Функцыя, якая выклікаецца, калі анімацыя элемента пачынаецца. Функцыя прымае `animation` (у выглядзе промасу) і `jumpedToEnd` (Булева значэнне. Калі `true`, то анімацыя аўтаматычна завяршаецца).
`done`	Функцыя, якая выклікаецца, калі анімацыя элемента заканчваецца (яе промас выкананы поспешна). Функцыя прымае `animation` (у выглядзе промасу) і `jumpedToEnd` (Булева значэнне. Калі `true`, то анімацыя аўтаматычна завяршаецца).
`fail`	Функцыя, якая выклікаецца, калі анімацыя элемента заканчваецца з памылкай (яе промас выкананы з памылкай). Функцыя прымае `animation` (у выглядзе промасу) і `jumpedToEnd` (Булева значэнне. Калі `true`, то анімацыя аўтаматычна завяршаецца).
`always`	Функцыя, якая выклікаецца, калі анімацыя элемента завяршаецца або спыняецца без завяршэння (яе промас выкананы паспяхова або з памылкай). Функцыя прымае `animation` (у выглядзе промасу) і `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,
які выбірае элементы, якія ў дадзены момант задзейнічаныя ў анімацыі