Metod fadeTo

Metod fadeTo geçirijiligi elementiň berlen bahasyna çenli ýumşak üýtgedýär, 0-dan 1 çenli aralykda.

Sintaksis

Dowamlylygy we geçirijilik metodyň islendik ulanylyş wariantynda berilýär. Geçirijiligiň berlen wagtyň dowamynda üýtgemegi, adaty boýunça 400ms:

javascript.fadeTo(dowamlylyk, geçirijilik bahasy);

Wagty diňe millisekuntlarda däl, eýsem açar sözler bilen hem berlip bolýar slow (600ms) we fast (200ms), baha uly bolsa, animasiýa haýal:

javascript.fadeTo('slow' ýa-da 'fast', geçirijilik bahasy);

Üçünji (mecburi däl) parametr hökmünde hem callback-funksiýasyny geçirmek bolýar - animasiýany ýerine ýetirenden soň işleýär:

javascript.fadeTo(dowamlylyk, geçirijilik bahasy, [callback-funksiýasy]);

Ýumşaklyk funksiýasyny we callback-funksiýasyny hem (mecburi däl parametrler) geçirmek bolýar - animasiýany ýerine ýetirenden soň işleýär:

javascript.fadeTo(dowamlylyk, geçirijilik bahasy, [ýumşaklyk funksiýasy], [callback-funksiýasy]);

Mysal

Aşakdaky mysalda, fadeTo metodynyň kömegi bilen düwmä #hide basylanda #test bilen element geçirijiligi 0.5-ä çenli azaldylmak bilen gizleniler, #show düwmesine basylanda bolsa görkeziler:

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').fadeTo(1000, 1);
});

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

Şeýle-de görüň

  • metod fadeToggle,
    elementleriň geçirijiligini üýtgedýär
  • metod fadeIn,
    gizlenen elementleri ýumşak görkezýär, olary geçiriksiz edýär
  • metod animate,
    elementleriň aýratynlyklaryny animasiýalaýar