Метод 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(қасиеттер, опциялар);

Мысалы, CSS-қасиеттері width және height үшін toggle мәнін орнатайық. Ұзақтығын 5000мс, тегістеу функцияларын нысан түрінде берейік, ені үшін бұл сызықтық функция болады, ал биіктігі үшін - easeOutBounce, сонымен қатар анимация аяқталғаннан кейін бізде функция бір рет орындалады (complete кілтін қараңыз), ол #test элементінен кейін 'Анимация аяқталды.' жазуы бар дивті орналастырады:

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Анимация аяқталды.</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 селекторы,
ол қазіргі уақытта анимацияда қолданылатын элементтерді таңдайды