fadeIn metodu

fadeIn metodu gizlenen elementleri ýumşak görkezýär, olary däl-şeffaf edýär. Elementleri gizlemek üçin fadeOut metodyny ulanyp bolýar, olary şeffaf edýär.

Sintaksis

Berlen wagtyň dowamynda görkezmek, adaty bolup 400ms:

javascript.fadeIn(dowamlylyk);

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

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

Eger parametrleri görkezmezseňiz - animasiýa bolmaz, elementler derrew görkeziler:

javascript.fadeIn();

Ýene-de ikinji parametr hökmünde ýumşaklyk funksiýasyny, üçünji parametr hökmünde bolsa callback-funksiýany (animasiýa gutaran soň işleýär) geçirmek bolýar. Her iki parametr hem hökman däl:

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

Metoda dürli opsionalary, JavaScript obyekti görnüşinde, öz içine alýan jübütler açar: baha geçirmek bolýar:

javascript.fadeIn(options);

Şeýle bir obyekt 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 animate metody üçin görmek bolýar. Mysal üçin, dowamlylygy we ýumşaklyk funksiýasyny kesgitläýäris:

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

Mysal

Aşakdaky mysalda düwmä #hide basylanynda #test elementi fadeOut metody ýardymynda gizleniler, #show düwmesine basylanynda bolsa, fadeIn ýardymynda görkeziler. Şeýle hem biz tizligi 1000ms edip kesgitleýä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

Indiki mysalda animasiýa gutaran soň #test elementi görkezilende biz '!' tekstli habary çykararys, gizlenende bolsa '?' tekstli habary:

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-de göz aňyňyza düşürüň