jQuery-da animate metodi

Oldingi darslarda o‘rganilgan barcha usullar biroz cheklangan - ular yaratilgan maqsadga mos ishlaydi. Agar sizga animatsiya ustidan ko‘proq nazorat kerak bo‘lsa, universal animate usulidan foydalaning.

Ushbu usul birinchi parametr sifatida obyektni qabul qiladi, unda siz animatsiya qilmoqchi bo‘lgan CSS xususiyatlarining yangi qiymatlarini belgilashingiz kerak. Ikkinchi parametr sifatida esa animatsiya bajarilish vaqtini belgilaysiz.

Keling, ushbu HTML kodida ushbu usulni amalga oshiramiz:

<button id="button">click me</button>
<div id="elem">text...</div>

CSS esa shunday ko‘rinishda bo‘lsin:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Keling, tugmani bosganda element quyidagi o‘lchamlarga qisqarishi uchun sozlash amalga oshiramiz: balandlik - 50px, kenglik - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Agar qiymat height: '+=50' formatida ko‘rsatilsa, animatsiya quyidagicha ishlaydi: balandlikning joriy qiymatiga 50px (bizning holatda) qo‘shiladi va element yangi qiymatga sekin animatsiya qilinadi. Keling, misol orqali ko‘rib chiqamiz:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Animate usuli haqida batafsil ma'lumotni jQuery ma'lumotnomasida ko‘rib chiqing.

animate

Quyidagi HTML mavjud:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

#block id-siga ega bo‘lgan div-ga bosilganda uning kengligi 1100ms davomida 200px gacha oshadigan qiling.

Birinchi vazifadagi HTML dan foydalaning. #block id-siga ega bo‘lgan div-ga har bir bosilganda uning kengligi 200px ga oshsin va har bir shunday o‘sish 900ms davomida amalga oshsin.

Birinchi vazifadagi HTML dan foydalaning. #block id-siga ega bo‘lgan div-ga har bir bosilganda uning kengligi va balandligi 100px ga oshsin va har bir shunday o‘sish 950ms davomida amalga oshsin.

Birinchi vazifadagi HTML dan foydalaning. #block id-siga ega bo‘lgan div-ga har bir bosilganda, u 100px ga o‘ngga siljisin va har bir shunday siljish 700ms davomida amalga oshsin.