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í:

.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:

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

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

.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:

.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:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

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

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

Viz také

metoda fadeToggle,
která mění průhlednost prvků
metoda fadeIn,
která plynule zobrazuje skryté prvky, činí je neprůhlednými
metoda animate,
která animuje vlastnosti prvků