Metóda fadeToggle

Metóda fadeToggle postupne plynulo zobrazuje alebo skrýva prvky, animujúc ich priehľadnosť.

Syntax

Zobrazenie/skrytie za daný čas, 400ms predvolené:

.fadeToggle(duration);

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

.fadeToggle('slow' alebo 'fast');

Ak neuvádzate parametre - animácia nebude, prvky sa budú zobrazovať/skrývať okamžite:

.fadeToggle();

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

.fadeToggle(duration, [easing function], [callback function]);

Je možné metóde odovzdať rôzne možnosti, vo forme objektu JavaScript, obsahujúceho páry key: value:

.fadeToggle(options);

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 trvanie a funkciu plynulosti:

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

Príklad

V nasledujúcom príklade pri prvom stlačení tlačidla #toggle prvok s #test bude skrývaný, a pri opakovanom - zobrazovaný. Pre toto použijeme metódu fadeToggle. Tiež nastavíme rýchlosť na 1000ms a hodnotu funkcie plynulosti na linear:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Pozri tiež

metóda slideToggle,
ktorý strieda plynulé zobrazovanie/skrývanie prvkov
metóda fadeTo,
ktorý mení priehľadnosť prvkov
metóda toggle,
ktorý strieda plynulé zobrazovanie/skrývanie prvkov
metóda animate,
ktorý animuje vlastnosti prvkov