fadeOut metodu

fadeOut metody elementleri ýumuşak gizleýär. Elementleri görkezmek üçin fadeIn metodyny ulanyp, olary şaffaf däl etmek mümkin.

Sintaksis

Bellänen wagtyň dowamynda görkezme, 400 ms deslapky baha:

javascript.fadeOut(dowamlylyk);

Wagt diňe millisekuntda däl, eýsem açar sözler slow (600 ms) we fast (200 ms) bilen hem belläp bolýar, baha uly boldukça, animasiýa haýalrak:

javascript.fadeOut('slow' ýa-da 'fast');

Eger parametrler görkezilmese - animasiýa bolmaz, elementler çalt gizleniler:

javascript.fadeOut();

Ýumuşaklyk funksiýasyny ikinji parametr hökmünde hem geçirip bolýar, şeýle hem üçünji callback-funksiýa - animasiýa ýerine ýetirilenden soň işleýär. Iki parametri hem hökmany däl:

javascript.fadeOut(dowamlylyk, [ýumuşaklyk funksiýasy], [callback-funksiýasy]);

Metoda dürli opsionalary geçirip bolýar, JavaScript obýekti görnüşinde, içinde açar: baha jüpleri bilen:

javascript.fadeOut(options);

Şeýle obýekt aşakdaky parametrleri we funksiýalary geçirip biler - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Bu parametrleriň düşündirişini siz animate metodi üçin görmegiňiz mümkin. Mysal üçin, dowamlylygy we ýumuşaklyk funksiýasyny belleýäris:

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

Mysal

Aşakdaky mysalda düwmä basylanda #hide element bilen #test fadeOut metody arkaly gizleniler, #show düwmesi bilen bolsa görkeziler, fadeIn arkaly. Şeýle hem biz tizligi 1000 ms belleýäris:

html<button id="hide">gizle</button>
<button id="show">görkez</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);
});

Mysal

Aşakdaky mysalda bolsa animasiýa tamamlanandan soň #test elementini görkezende biz habar çykararys '!' teksti bilen, gizlemez bolsa '?' teksti bilen:

html<button id="hide">gizle</button>
<button id="show">görkez</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('?');
  });
});

Şeýle hem görmeli