Metoda fadeToggle

Metoda fadeToggle postupně plynule zobrazuje nebo skrývá prvky, animuje jejich průhlednost.

Syntaxe

Zobrazení/skrytí za zadaný čas, 400ms ve výchozím nastavení:

.fadeToggle(doba trvání);

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

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

Pokud nezadáte parametry - animace nebude, prvky se budou zobrazovat/skrývat okamžitě:

.fadeToggle();

Jako druhý parametr lze také předat funkci pro plynulost, a jako třetí callback funkci - spustí se po dokončení animace. Oba parametry jsou volitelné:

.fadeToggle(doba trvání, [funkce pro plynulost], [callback funkce]);

Metodu lze předat různé možnosti, ve formě objektu JavaScript, obsahujícího dvojice klíč: hodnota:

.fadeToggle(možnosti);

Takový objekt může předávat následující parametry a funkce - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Popis těchto parametrů můžete zobrazit pro metodu animate. Například, nastavíme dobu trvání a funkci pro plynulost:

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

Příklad

V následujícím příkladu při prvním stisknutí tlačítka #toggle bude prvek s #test skryt, a při opakovaném - zobrazen. K tomu použijeme metodu fadeToggle. Také nastavíme rychlost na 1000ms a hodnotu funkce pro plynulost 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');
});

Viz také

metoda slideToggle,
která střídá plynulé zobrazení/skrytí prvků
metoda fadeTo,
která mění průhlednost prvků
metoda toggle,
která střídá plynulé zobrazení/skrytí prvků
metoda animate,
která animuje vlastnosti prvků