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:

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

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

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

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

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

Pozrite si aj

metódu fadeToggle,
ktorá mení priehľadnosť prvkov
metódu fadeIn,
ktorá plynulo zobrazuje skryté prvky, robiac ich nepriehľadnými
metódu animate,
ktorá animuje vlastnosti prvkov