Meetod fadeIn

Meetod fadeIn näitab peidetud elemendid sujuvalt, muutes need läbipaistmatuks. Peita elemendid on võimalik meetodi abil fadeOut, muutes need läbipaistvaks.

Süntaks

Näitamine määratud aja jooksul, 400ms vaikimisi:

javascript.fadeIn(kestus);

Aega saab määrata mitte ainult millisekundites, vaid ka märksõnadega slow (600ms) ja fast (200ms), mida suurem väärtus, seda aeglasem animatsioon:

javascript.fadeIn('slow' või 'fast');

Kui parameetreid ei määrata - animatsiooni ei toimu, elemendid kuvatakse koheselt:

javascript.fadeIn();

Samuti on võimalik teise parameetrina edastada sujuvusfunktsiooni, ning kolmandana callback-funktsiooni - käivitub pärast animatsiooni lõppu. Mõlemad parameetrid on valikulised:

javascript.fadeIn(kestus, [sujuvusfunktsioon], [callback-funktsioon]);

Meetodile on võimalik edastada erinevaid valikuid, JavaScripti objekti kujul, mis sisaldab paare võti: väärtus:

javascript.fadeIn(valikud);

Selline objekt võib edastada järgmisi parameetreid ja funktsioone - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Nende parameetrite kirjeldust saate vaadata meetodi animate jaoks. Näiteks, määrame kestuse ja sujuvusfunktsiooni:

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

Näide

Järgmises näites nupu vajutamisel #hide element #test peidetakse meetodi fadeOut abil, ja nupu #show vajutamisel - kuvatakse, meetodi fadeIn abil. Samuti määrame kiiruseks 1000ms:

html<button id="hide">peida</button>
<button id="show">näita</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);
});

Näide

Järgmises näites pärast animatsiooni lõppu elemendi #test kuvamisel me väljastame sõnumi tekstiga '!', ja peitmisel tekstiga '?':

html<button id="hide">peida</button>
<button id="show">näita</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('?');
  });
});

Vaata ka