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