Методи 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">чап</button>
<button id="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,
ки элементҳоеро интихоб мекунад, ки дар ин лаҳза дар аниматсия иштирок доранд