Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

animate()

jQuery animate() metodi

❮ jQuery effekt metodlari

Misol

Elementni balandligini o‘zgartirish orqali "animatsiya qilish":

$("button").click(function(){   $("#box").animate({height: "300px"}); });
O‘zingiz sinab ko‘ring »

Ta’rif va qo‘llanilishi

animate() metodi CSS xususiyatlari to‘plami bo‘yicha maxsus animatsiyani bajaradi.

Bu metod elementni CSS stillari yordamida bir holatdan boshqa holatga o‘tkazadi. Animatsiya effektini hosil qilish uchun CSS xususiyatining qiymati asta-sekin o‘zgartiriladi.

Faqat sonli qiymatlarni animatsiya qilish mumkin (masalan, "margin:30px"). String qiymatlarni (masalan, "background-color:red") animatsiya qilib bo‘lmaydi, "show", "hide" va "toggle" stringlari bundan mustasno. Bu qiymatlar animatsiya qilinayotgan elementni yashirish va ko‘rsatish imkonini beradi.

Maslahat: Nisbiy animatsiyalar uchun "+=" yoki "-=" dan foydalaning.

Sintaksis

(selector).animate({styles},speed,easing,callback)

Parametr Tavsif
styles Majburiy. Animatsiya qilinadigan bitta yoki bir nechta CSS xususiyati/qiymatini belgilaydi.

Eslatma: animate() metodi bilan ishlatilganda xususiyat nomlari camelCase ko‘rinishida yozilishi shart: padding-left o‘rniga paddingLeft, margin-right o‘rniga marginRight va hokazo yozishingiz kerak bo‘ladi.

Animatsiya qilinishi mumkin bo‘lgan xususiyatlar:


Faqat sonli qiymatlarni animatsiya qilish mumkin (masalan, "margin:30px"). String qiymatlarni (masalan, "background-color:red") animatsiya qilib bo‘lmaydi, "show", "hide" va "toggle" stringlari bundan mustasno. Bu qiymatlar animatsiya qilinayotgan elementni yashirish va ko‘rsatish imkonini beradi.
speed Ixtiyoriy. Animatsiya tezligini belgilaydi. Standart qiymati: 400 millisekund

Mumkin bo‘lgan qiymatlar:

  • millisekundlar (masalan, 100, 1000, 5000 va hokazo)
  • "slow"
  • "fast"
easing Ixtiyoriy. Animatsiyaning turli nuqtalarida elementning tezligini belgilaydi. Standart qiymati: "swing". Mumkin bo‘lgan qiymatlar:
  • "swing" - boshida/oxirida sekinroq, o‘rtasida esa tezroq harakatlanadi
  • "linear" - o‘zgarmas tezlikda harakatlanadi
Maslahat: Boshqa easing funksiyalari tashqi plaginlarda mavjud.
callback Ixtiyoriy. Animatsiya tugagandan keyin bajariladigan funksiya. Callback funksiyasi haqida ko‘proq bilish uchun jQuery callback funksiyasi bobini o‘qing

Muqobil sintaksis

(selector).animate({styles},{options})

Parametr Tavsif
styles Majburiy. Animatsiya qilinadigan bitta yoki bir nechta CSS xususiyati/qiymatini belgilaydi (mumkin bo‘lgan qiymatlarni yuqorida ko‘ring)
options Ixtiyoriy. Animatsiya uchun qo‘shimcha parametrlarni (options) belgilaydi. Mumkin bo‘lgan qiymatlar:
  • duration - animatsiya tezligini o‘rnatadi
  • easing - ishlatiladigan easing funksiyasini belgilaydi
  • complete - animatsiya tugagandan keyin bajariladigan funksiyani belgilaydi
  • step - animatsiyaning har bir qadami uchun bajariladigan funksiyani belgilaydi
  • progress - animatsiyaning har bir qadamidan keyin bajariladigan funksiyani belgilaydi
  • queue - animatsiyani effektlar navbatiga qo‘yish yoki qo‘ymaslikni belgilovchi Boolean qiymat
  • specialEasing - styles parametridagi bitta yoki bir nechta CSS xususiyati va ularga mos easing funksiyalaridan iborat map
  • start - animatsiya boshlanganda bajariladigan funksiyani belgilaydi
  • done - animatsiya tugaganda bajariladigan funksiyani belgilaydi
  • fail - animatsiya muvaffaqiyatli yakunlanmasa, bajariladigan funksiyani belgilaydi
  • always - animatsiya yakunlanmasdan to‘xtasa, bajariladigan funksiyani belgilaydi

O‘zingiz sinab ko‘ring — misol

animate() metodini callback funksiyasi bilan ishlatish
animate() metodini animatsiyani takrorlaydigan callback funksiyasi bilan qanday ishlatish mumkin.

Muqobil sintaksisga misol
Bir nechta animatsiya stillari va parametrlarini belgilash uchun muqobil sintaksisdan foydalanish.

animate() yordamida progress bar yaratish
Progress bar yaratish uchun animate() metodidan qanday foydalanish mumkin.

Sahifa langarlariga (anchor) silliq aylantirish qo‘shish
Havolalarga silliq aylantirish (smooth scrolling) qo‘shish uchun animate() metodidan qanday foydalanish mumkin.

❮ jQuery effekt metodlari

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish