Metod fadeOut

Metod fadeOut elementlarni sekinlik bilan yashiradi. Elementlarni metod fadeIn yordamida shaffof emas qilib ko‘rsatish mumkin.

Sintaksis

Belgilangan vaqt oralig‘ida ko‘rsatish, standart 400ms:

javascript.fadeOut(davomiylik);

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

javascript.fadeOut('slow' yoki 'fast');

Agar parametrlarni ko‘rsatmasangiz - animatsiya bo‘lmaydi, elementlar darhol yashinadi:

javascript.fadeOut();

Ikkinchi parametr sifatida silliqlik funksiyasini, shuningdek uchinchi parametr sifatida callback-funksiyani berish mumkin - u animatsiya tugagandan so‘ng ishga tushadi. Ikkala parametr ham ixtiyoriy:

javascript.fadeOut(davomiylik, [silliqlik funksiyasi], [callback-funksiya]);

Metodga turli xil opsiyalarni, JavaScript obyekti ko‘rinishida, o‘z ichiga olgan kalit: qiymat juftliklarini berish mumkin:

javascript.fadeOut(options);

Bunday obyekt quyidagi parametrlar va funksiyalarni o‘tkazishi mumkin - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Ushbu parametrlarning tavsifini siz metod animate uchun ko‘rishingiz mumkin. Masalan, davomiylik va silliqlik funksiyasini o‘rnatamiz:

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

Misol

Quyidagi misolda #hide tugmasi bosilganda #test elementi fadeOut metodi yordamida yashirinadi, #show tugmasi bosilganda esa - fadeIn metodi yordamida ko‘rsatiladi. Shuningdek, tezlikni 1000ms ga o‘rnatamiz:

html<button id="hide">yashirish</button>
<button id="show">ko‘rsatish</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

Misol

Quyidagi misolda esa #test elementini ko‘rsatish animatsiyasi tugagandan so‘ng biz '!' matnli xabarni chiqaramiz, yashirish animatsiyasi tugaganda esa '?' matnli xabarni chiqaramiz:

html<button id="hide">yashirish</button>
<button id="show">ko‘rsatish</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Shuningdek qarang