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

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

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

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

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

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

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

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

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

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

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

Viz také