Metod animate

Metod animate müxtelif CSS xasseleri üçün animasiya effektleri yaratmağa imkan verir. Yeganə məcburi parametr - css metoduna ötürdüyümüzə bənzər animasiya olunacaq CSS xasseleri olan obyektdir. Rəqəmsal olmayan və ya bir neçə dəyəri olan çoxlu xasseler jQuery-nin əsas funksionallığı ilə animasiya oluna bilməz (məsələn background-color). Həmçinin CSS xasselerinin qısaldılmış adları həmişə dəstəklənmir, məsələn font - əvəzində fontSize və ya font-size istifadə edilməlidir. Dəyərlərdən əvvəl '+=' və ya '-=' qoyula bilər, bu halda göstərilən dəyər cari xassə dəyərindən əlavə ediləcək və ya çıxılacaq. Həmçinin rəqəmsal dəyərlər əvəzinə show, hide və ya toggle qoyula bilər. Bütün jQuery effektləri, o cümlədən animate, qlobal olaraq jQuery.fx.off = true parametrindən istifadə etməklə söndürülə bilər, bu da müddət dəyərini 0 təyin edir.

Sintaksis

Animasiyanın birinci parametri kimi animasiya olunacaq CSS xasseleri və onların açar: dəyər formatında dəyərləri olan obyekt ötürülür. Qalan parametrlər isteğe bağlı hesab edilir. İkinci parametr - animasiyanın müddətini millisaniyələrlə müəyyən edir, standart olaraq 400ms. Üçüncü parametr keçid üçün hamarlıq funksiyasıdır (standart olaraq swing), dördüncü parametr isə - animasiya bitdikdən sonra işə düşəcək callback funksiyasıdır:

.animate(xasseler, [müddət ], [hamarlıq funksiyası ], [callback funksiyası ]);

Vaxt təkcə millisaniyələrlə deyil, həm də slow (600ms) və fast (200ms) açar sözləri ilə təyin edilə bilər, dəyər nə qədər böyükdürsə, animasiya bir o qədər yavaş olur. Metoda ikinci parametr kimi müxtəlif seçimlər, JavaScript obyekti şəklində, açar: dəyər cütlərini ehtiva edən şəkildə ötürülə bilər:

.animate(xasseler, options);

Məsələn, CSS xasseleri width və height üçün toggle dəyərini təyin edək. Müddəti 5000ms, hamarlıq funksiyalarını isə obyekt şəklində ötürək, eni üçün xətti funksiya, hündürlüyü üçün isə - easeOutBounce olsun, animasiya başa çatdıqda isə bir dəfə funksiya yerinə yetirilsin (complete açarına baxın), hansı ki #test elementindən sonra 'Animation complete.' yazısı olan div yerləşdirəcək:

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

Aşağıdakı cədvəldə options obyektinin xasseleri və metodları və onların təsviri verilmişdir:

Ad	Təsvir
`duration`	Animasiyanın müddəti millisaniyələrlə - sətir və ya rəqəm. Standart olaraq `400ms`.
`easing`	Hansı hamarlıq funksiyasından istifadə ediləcəyini müəyyən edir. Standart olaraq `swing`.
`queue`	Boolean dəyəri və ya sətir. Standart olaraq `true`. Animasiyanı növbəyə qoyulub-qoyulmayacağını göstərir. `false` dəyərində animasiya dərhal başlayacaq. Əgər parametr sətir kimi ötürülərsə, onda animasiya bu parametr tərəfindən təmsil olunan növbəyə qoyulacaq. Fərdi adlı növbə istifadə edildikdə, animasiya avtomatik başlamayacaq, onu başlatmaq üçün - `dequeue('queuename')` istifadə edin.
`specialEasing`	Burada açarı CSS xasseleri, dəyərləri isə onlara uyğun gələn hamarlıq funksiyaları olan obyekt ötürə bilərsiniz.
`step`	Hər animasiya olunan elementin hər animasiya olunan xassəsi üçün çağırılan funksiya. O, xassə dəyəri təyin edilməmişdən əvvəl onu dəyişmək üçün `Tween` obyektini modifikasiya etməyə imkan verir. Parametr kimi cari `tween` dəyərini və `Tween` obyektini qəbul edir.
`progress`	Animasiyanın hər addımından sonra çağırılan funksiya, animasiya olunan xassələrin sayından asılı olmayaraq hər element üçün yalnız bir dəfə çağırılır. Funksiya üç parametr qəbul edir `animation` (promis şəklində), `progress` (`0`-dən `1`-ə qədər rəqəm) və `remainingMs` (qalan millisaniyələrin sayı).
`complete`	Elementin animasiyası bitdikdən sonra bir dəfə çağırılan funksiya. Funksiya `animation` (promis şəklində) qəbul edir.
`start`	Elementin animasiyası başlayanda çağırılan funksiya. Funksiya `animation` (promis şəklində) və `jumpedToEnd` (Boolean dəyər. Əgər `true`-dursa, onda animasiya avtomatik başa çatır) qəbul edir.
`done`	Elementin animasiyası bitdikdə çağırılan funksiya (onun promisi uğurla yerinə yetirilib). Funksiya `animation` (promis şəklində) və `jumpedToEnd` (Boolean dəyər. Əgər `true`-dursa, onda animasiya avtomatik başa çatır) qəbul edir.
`fail`	Elementin animasiyası xəta ilə bitdikdə çağırılan funksiya (onun promisi xəta ilə yerinə yetirilib). Funksiya `animation` (promis şəklində) və `jumpedToEnd` (Boolean dəyər. Əgər `true`-dursa, onda animasiya avtomatik başa çatır) qəbul edir.
`always`	Elementin animasiyası bitdikdə və ya bitirmədən dayandırıldıqda çağırılan funksiya (onun promisi uğurla və ya xəta ilə yerinə yetirilib). Funksiya `animation` (promis şəklində) və `jumpedToEnd` (Boolean dəyər. Əgər `true`-dursa, onda animasiya avtomatik başa çatır) qəbul edir.

Nümunə

Gəlin #left düyməsinə kliklədikdə, yaşıl kvadratı sola, #right düyməsinə kliklədikdə isə sağa 50px sürüşdürək, həmçinin müddəti 600ms - slow əmri ilə təyin edək:

<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');
});

Həmçinin bax

metod show,
elementləri yumşaq şəkildə göstərir
metod stop,
işə düşmüş animasiyanı dayandırmağa imkan verir
metod delay,
hadisələrin yerinə yetirilməsinə gecikmə təyin edir
xassə jQuery.fx.off,
animasiyanı qlobal olaraq söndürməyə imkan verir
selektor animated,
hazırda animasiyada iştirak edən elementləri seçir