Metod animate

animate metodi turli CSS-xususiyatlari uchun animatsion effektlar yaratishga imkon beradi. Yagona majburiy parametr - biz css metodiga o'tkazganimizga o'xshash CSS-xususiyatlari bilan ob'ekt. Ko'pgina raqamli bo'lmagan qiymatlarga yoki bir nechta qiymatlarga ega bo'lgan xususiyatlar jQuery-ning asosiy funksionalligi bilan animatsiya qilinishi mumkin emas (masalan background-color). Shuningdek, qisqartirilgan CSS-xususiyatlari nomlari har doim qo'llab-quvvatlanmaydi, masalan font - buning o'rniga fontSize yoki font-size ishlatilishi kerak. Qiymatlardan oldin '+=' yoki '-=' qo'yish mumkin, bunday holda keyin ko'rsatilgan qiymat joriy xususiyat qiymatiga qo'shiladi yoki undan ayiriladi. Shuningdek, raqamli qiymatlar o'rniga show, hide yoki toggle qo'yish mumkin. Barcha jQuery effektlari, jumladan animate, global sozlamalar orqali o'chirilishi mumkin jQuery.fx.off = true, bu davomiylik qiymatini 0 ga o'rnatadi.

Sintaksis

Animatsiyaning birinchi parametri sifatida CSS-xususiyatlari va ularning qiymatlari kalit: qiymat formatida ob'ekt o'tkaziladi, biz ularni animatsiya qilmoqchimiz. Qolgan parametrlar ixtiyoriy hisoblanadi. Ikkinchi parametr - animatsiyaning davomiyligini millisekundlarda belgilaydi, 400ms andaza bo'yicha. Uchinchi parametr silliqlik funksiyasi o'tish uchun (andaza bo'yicha swing), shuningdek, to'rtinchi - animatsiya tugagandan so'ng ishlaydigan callback-funksiya:

.animate(xususiyatlar, [davomiylik ], [silliqlik funksiyasi ], [callback-funksiya ]);

Vaqtni nafaqat millisekundlarda, balki kalit so'zlar bilan ham belgilash mumkin slow (600ms) va fast (200ms), qiymat qancha katta bo'lsa, animatsiya shuncha sekinroq bo'ladi. Metodga turli xil opsiyalarni, JavaScript ob'ekti ko'rinishida, o'tkazish mumkin juftliklar kalit: qiymat:

.animate(xususiyatlar, options);

Masalan, CSS-xususiyatlari width va height uchun qiymatni toggle ga o'rnatamiz. Davomiylik 5000ms, silliqlik funksiyalarini ob'ekt ko'rinishida o'tkazamiz, eni uchun bu chiziqli funksiya bo'ladi, balandlik uchun esa - easeOutBounce, shuningdek animatsiya tugagandan so'ng funksiya bir marta bajariladi (complete kalitiga qarang), bu elementdan keyin #test divni 'Animation complete.' yozuvi bilan joylashtiradi:

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

Quyidagi jadvalda options ob'ektining xususiyatlari va metodlari va ularning tavsifi keltirilgan:

Nomi	Tavsif
`duration`	Animatsiyaning davomiyligi millisekundlarda - satr yoki raqam. `400ms` andaza bo'yicha.
`easing`	Qaysi silliqlik funksiyasidan foydalanishni belgilaydi. `swing` andaza bo'yicha.
`queue`	Mantiqiy qiymat yoki satr. `true` andaza bo'yicha. Animatsiyani navbatga qo'yish kerakligini ko'rsatadi. `false` qiymatida animatsiya darhol boshlanadi. Agar parametr satr ko'rinishida o'tkazilsa, animatsiya ushbu parametr bilan ifodalangan navbatga qo'yiladi. Foydalanuvchi nomi bilan navbatdan foydalanganda, animatsiya avtomatik boshlanmaydi, uni boshlash uchun - `dequeue('queuename')` dan foydalaning.
`specialEasing`	Bu yerda siz ob'ektni o'tkazishingiz mumkin, unda kalitlar CSS-xususiyatlari, qiymatlari esa - ularga mos keladigan silliqlik funksiyalari bo'ladi.
`step`	Har bir animatsiya qilingan xususiyat uchun chaqiriladigan funksiya har bir animatsiya qilingan element. Bu `Tween` ob'ektini o'zgartirishga imkon beradi, xususiyat qiymatini o'rnatilishidan oldin o'zgartirish uchun. Parametr sifatida joriy `tween` qiymatini va `Tween` ob'ektini qabul qiladi.
`progress`	Animatsiyaning har bir qadamidan keyin chaqiriladigan funksiya, faqat har bir element uchun bir marta animatsiya qilingan xususiyatlar sonidan qat'iy nazar. Funksiya uchta parametrni qabul qiladi `animation` (promise ko'rinishida), `progress` (`0` dan `1` gacha raqam) va `remainingMs` (qolgan millisekundlar soni).
`complete`	Element animatsiyasi tugagandan keyin bir marta chaqiriladigan funksiya. Funksiya `animation` ni (promise ko'rinishida) qabul qiladi.
`start`	Element animatsiyasi boshlanganda chaqiriladigan funksiya. Funksiya `animation` ni (promise ko'rinishida) va `jumpedToEnd` ni (Mantiqiy qiymat. Agar `true` bo'lsa, animatsiya avtomatik ravishda tugaydi) qabul qiladi.
`done`	Element animatsiyasi tugaganda chaqiriladigan funksiya (uning promise muvaffaqiyatli bajarilgan). Funksiya `animation` ni (promise ko'rinishida) va `jumpedToEnd` ni (Mantiqiy qiymat. Agar `true` bo'lsa, animatsiya avtomatik ravishda tugaydi) qabul qiladi.
`fail`	Element animatsiyasi xato bilan tugaganda chaqiriladigan funksiya (uning promise xato bilan bajarilgan). Funksiya `animation` ni (promise ko'rinishida) va `jumpedToEnd` ni (Mantiqiy qiymat. Agar `true` bo'lsa, animatsiya avtomatik ravishda tugaydi) qabul qiladi.
`always`	Element animatsiyasi tugaganda yoki tugamasdan to'xtatilganda chaqiriladigan funksiya (uning promise muvaffaqiyatli yoki xato bilan bajarilgan). Funksiya `animation` ni (promise ko'rinishida) va `jumpedToEnd` ni (Mantiqiy qiymat. Agar `true` bo'lsa, animatsiya avtomatik ravishda tugaydi) qabul qiladi.

Misol

Keling #left tugmasi bosilganda, yashil kvadratni chapga siljitaylik, #right tugmasi bosilganda esa o'ngga 50px ga siljitaylik, shuningdek davomiylikni 600ms ga - slow buyrug'i bilan o'rnatamiz:

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

Shuningdek qarang

metod show,
elementlarni sekin ko'rsatadi
metod stop,
boshlangan animatsiyani to'xtatishga imkon beradi
metod delay,
hodisalarni bajarishni kechiktirishni o'rnatadi
xususiyat jQuery.fx.off,
animatsiyani global o'chirishga imkon beradi
selektor animated,
hozirgi vaqtda animatsiyada ishtirok etayotgan elementlarni tanlaydi