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 селектору,
азыркы учурда анимацияда колдонулган элементтерди тандайт