jQuery animatsiya
jQuery yordamida maxsus animatsiyalar yaratish mumkin.
jQuery animatsiyalari — animate() metodi
jQuery animate() metodi maxsus animatsiyalar yaratish uchun ishlatiladi.
Sintaksis:
$(selector).animate({params},speed,callback);
Majburiy params parametri animatsiya qilinadigan CSS xususiyatlarini belgilaydi.
Ixtiyoriy speed parametri effekt davomiyligini belgilaydi. U quyidagi qiymatlarni qabul qilishi mumkin: "slow", "fast" yoki millisekundlar.
Ixtiyoriy callback parametri — animatsiya tugagandan keyin bajariladigan funksiya.
Quyidagi misol animate() metodining oddiy qo‘llanilishini namoyish etadi: u <div> elementini left xususiyati 250px ga yetguncha o‘ngga siljitadi:
Sukut bo‘yicha barcha HTML elementlar statik joylashuvga (static) ega va ularni siljitib bo‘lmaydi.
Joylashuvni o‘zgartirish uchun avval elementning CSS position xususiyatiga relative, fixed yoki absolute qiymatini berishni unutmang!
jQuery animate() — bir nechta xususiyatni o‘zgartirish
E’tibor bering, bir vaqtning o‘zida bir nechta xususiyatni animatsiya qilish mumkin:
Misol
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
O‘zingiz sinab ko‘ring »
animate() metodi bilan BARCHA CSS xususiyatlarini o‘zgartirish mumkinmi?
Ha, deyarli! Biroq bitta muhim narsani yodda tutish kerak: animate() metodi bilan ishlatilganda barcha xususiyat nomlari camelCase ko‘rinishida yozilishi shart: padding-left o‘rniga paddingLeft, margin-right o‘rniga marginRight va hokazo yozishingiz kerak bo‘ladi.
Shuningdek, rang animatsiyasi jQuery’ning asosiy kutubxonasiga kiritilmagan.
Agar rangni animatsiya qilmoqchi bo‘lsangiz, jQuery.com saytidan Color Animations plaginini yuklab olishingiz kerak.
jQuery animate() — nisbiy qiymatlardan foydalanish
Nisbiy qiymatlarni ham belgilash mumkin (bunda qiymat elementning joriy qiymatiga nisbatan olinadi). Buning uchun qiymat oldiga += yoki -= qo‘yiladi:
Misol
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
O‘zingiz sinab ko‘ring »
jQuery animate() — oldindan belgilangan qiymatlardan foydalanish
Hatto xususiyatning animatsiya qiymatini "show", "hide" yoki "toggle" deb ham belgilashingiz mumkin:
Misol
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
O‘zingiz sinab ko‘ring »
jQuery animate() — navbat (queue) funksiyasidan foydalanish
Sukut bo‘yicha jQuery animatsiyalar uchun navbat (queue) funksiyasiga ega.
Bu shuni anglatadiki, agar bir nechta animate() chaqiruvini ketma-ket yozsangiz, jQuery ushbu metod chaqiruvlaridan "ichki" navbat hosil qiladi. So‘ngra animate chaqiruvlarini BIRMA-BIR bajaradi.
Demak, agar turli animatsiyalarni ketma-ket bajarmoqchi bo‘lsak, navbat funksiyasidan foydalanamiz:
1-misol
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
O‘zingiz sinab ko‘ring »
Quyidagi misol avval <div> elementini o‘ngga siljitadi, so‘ngra matnning shrift o‘lchamini kattalashtiradi:
2-misol
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
O‘zingiz sinab ko‘ring »
jQuery mashqlari
jQuery effektlari ma’lumotnomasi
Barcha jQuery effektlari haqida to‘liq ma’lumot uchun jQuery effektlari ma’lumotnomasiga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!