Metóda fadeIn

Metóda fadeIn plynulo zobrazí skryté prvky, čím ich urobí nepriehľadnými. Skryť prvky je možné pomocou metódy fadeOut, čím sa stanú priehľadnými.

Syntax

Zobrazenie po zadaný čas, 400ms predvolené:

javascript.fadeIn(dĺžka trvania);

Čas je možné zadať nielen v milisekundách, ale aj kľúčovými slovami slow (600ms) a fast (200ms), čím väčšia hodnota, tým pomalšia animácia:

javascript.fadeIn('slow' alebo 'fast');

Ak nešpecifikujete parametre - animácia nebude, prvky sa zobrazia okamžite:

javascript.fadeIn();

Je možné aj druhým parametrom odovzdať funkciu plynulosti, a aj tretím callback funkciu - spustí sa po dokončení animácie. Oba parametre sú voliteľné:

javascript.fadeIn(dĺžka trvania, [funkcia plynulosti], [callback funkcia]);

Metóde je možné odovzdať rôzne možnosti, vo forme JavaScript objektu, obsahujúceho páry kľúč: hodnota:

javascript.fadeIn(možnosti);

Takýto objekt môže odovzdávať nasledujúce parametre a funkcie - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Popis týchto parametrov môžete pozrieť pre metódu animate. Napríklad, nastavíme dĺžku trvania a funkciu plynulosti:

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

Príklad

V nasledujúcom príklade po kliknutí na tlačidlo #hide sa prvok s #test skryje pomocou metódy fadeOut, a po kliknutí na tlačidlo #show - zobrazí, s použitím fadeIn. Tiež nastavíme rýchlosť na 1000ms:

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

Príklad

A v nasledujúcom príklade po ukončení animácie pri zobrazení prvku #test vypíšeme správu s textom '!', a pri skrytí s textom '?':

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

Pozrite tiež