Toggle usuli

toggle usuli elementlarni sekinlik bilan ko'rsatish/yashirishni almashtiradi. Agar element ko'rsatilgan bo'lsa, u yashiriladi va aksincha.

Sintaksis

Millisekundlarda belgilangan vaqt davomida ko'rsatish, standart 400ms:

.toggle(davomiylik);

Vaqtni nafaqat millisekundlarda, balki kalit so'zlar slow (600ms) va fast (200ms) bilan ham belgilash mumkin, qiymat qancha katta bo'lsa, animatsiya shuncha sekinroq bo'ladi:

.toggle('slow' yoki 'fast');

display parametri orqali true yoki false qiymatini uzatish mumkin. Agar true bo'lsa, element faqat ko'rsatiladi, false - yashiriladi:

.toggle(display);

Agar parametrlarni ko'rsatmasangiz - animatsiya bo'lmaydi, elementlar darhol ko'rsatiladi/yashiriladi:

.toggle();

Shuningdek, ikkinchi parametr sifatida silliqlik funktsiyasini, uchinchisi sifatida esa callback-funksiyani - animatsiya tugagandan so'ng ishlaydigan funktsiyani uzatish mumkin. Ikkala parametr ham ixtiyoriy:

.toggle(davomiylik, [silliqlik funktsiyasi], [callback-funksiya]);

Soddaroq ikkinchi ixtiyoriy parametr sifatida callback-funksiyani uzatish mumkin - animatsiya tugagandan so'ng ishlaydi:

.toggle(davomiylik, [callback-funksiya]);

Usulga turli xil opsiyalarni, JavaScript obyekti shaklida, kalit: qiymat juftliklarini o'z ichiga olgan holda uzatish mumkin:

.toggle(options);

Bunday obyekt quyidagi parametrlar va funktsiyalarni uzatishi mumkin - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Ushbu parametrlarning tavsifini siz animate usuli uchun ko'rishingiz mumkin. Masalan, davomiylik va silliqlik funktsiyasini o'rnatamiz:

.toggle( {duration: 800, easing: easeInSine} );

Misol

Keling, tugmani bosgandan so'ng, yashiringan abzatsni toggle usuli yordamida sekinlik bilan ko'rsatamiz. slow kalit so'zini uzatib, biz tezlikni 600ms ga o'rnatamiz. Qayta bosilganda - yashiramiz:

<button>matnni ko'rsatish</button>
<p style="display: none">matn</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Shuningdek qarang

fadeToggle usuli,
bu elementlarning shaffofligini o'zgartiradi
slideToggle usuli,
bu elementlarni sekinlik bilan ko'rsatish/yashirishni almashtiradi
show usuli,
bu elementlarni sekinlik bilan ko'rsatadi
hide usuli,
bu elementlarni sekinlik bilan yashiradi