Метод animate

Метод animate турли CSS-хусусиятлар учун анимация эффектларини яратиш имконини беради. Ягона мажбурий параметр - биз 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,
ҳозирги пайтда анимацияда иштирок этаётган элементларни танлайди