Metoda fadeTo

Metoda fadeTo plynule mění průhlednost prvku na zadanou hodnotu, v rozsahu od 0 do 1.

Syntaxe

Doba trvání a průhlednost jsou zadány při jakémkoli použití metody. Změna průhlednosti za daný čas, 400ms ve výchozím nastavení:

javascript.fadeTo(doba trvání, hodnota průhlednosti);

Čas lze zadávat nejen v milisekundách, ale i klíčovými slovy slow (600ms) a fast (200ms), čím větší hodnota, tím pomalejší animace:

javascript.fadeTo('slow' nebo 'fast', hodnota průhlednosti);

Jako třetí (volitelný) parametr lze také předat callback funkci - spustí se po dokončení animace:

javascript.fadeTo(doba trvání, hodnota průhlednosti, [callback funkce]);

Lze také předat funkci pro easing a callback funkci (volitelné parametry) - spustí se po dokončení animace:

javascript.fadeTo(doba trvání, hodnota průhlednosti, [funkce pro easing], [callback funkce]);

Příklad

V následujícím příkladu, pomocí metody fadeTo při stisknutí tlačítka #hide bude prvek s #test skryt snížením průhlednosti na 0.5, a při stisknutí #show - zobrazen:

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);
});

Viz také