Metóda fadeTo

Metóda fadeTo plynule mení priehľadnosť prvku na zadanú hodnotu, v rozsahu od 0 do 1.

Syntax

Trvanie a priehľadnosť sú zadané pri akejkoľvek variante použitia metódy. Zmena priehľadnosti za daný čas, 400ms predvolene:

javascript.fadeTo(trvanie, hodnota priehľadnosti);

Č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.fadeTo('slow' alebo 'fast', hodnota priehľadnosti);

Je možné aj tretím (voliteľným) parametrom odovzdať callback funkciu - spustí sa po dokončení animácie:

javascript.fadeTo(trvanie, hodnota priehľadnosti, [callback funkcia]);

Je možné aj odovzdať funkciu plynulosti a callback funkciu (voliteľné parametre) - spustí sa po dokončení animácie:

javascript.fadeTo(trvanie, hodnota priehľadnosti, [funkcia plynulosti], [callback funkcia]);

Príklad

V nasledujúcom príklade, pomocou metódy fadeTo pri stlačení tlačidla #hide prvok s #test bude skrývaný znížením priehľadnosti na 0.5, a pri #show - zobrazovaný:

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

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

Pozrite si aj