Metóda fadeOut
Metóda fadeOut plynulo skryje
elementy. Zobraziť elementy je možné pomocou metódy
fadeIn,
čím sa stanú nepriehľadnými.
Syntax
Zobrazenie za stanovený čas,
400ms predvolené:
.fadeOut(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:
.fadeOut('slow' alebo 'fast');
Ak nešpecifikujete parametre - animácia nebude, elementy sa skryjú okamžite:
.fadeOut();
Je možné aj druhým parametrom odovzdať funkciu plynulosti, a aj tretím callback funkciu - spustí sa po dokončení animácie. Oba parametre sú voliteľné:
.fadeOut(duration, [easing function], [callback function]);
Metóde je možné odovzdať rôzne možnosti, vo forme JavaScript objektu, obsahujúceho páry key: value:
.fadeOut(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:
.fadeOut( {duration: 800, easing: easeInSine} );
Príklad
V nasledujúcom príklade po kliknutí na tlačidlo
#hide bude element s #test
skrytý pomocou metódy fadeOut,
a na tlačidlo #show - zobrazený, s
použitím fadeIn. Tiež nastavíme
rýchlosť na 1000ms:
<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').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
Príklad
A v nasledujúcom príklade po ukončení
animácie pri zobrazení elementu #test
vypíšeme správu
s textom '!', a pri skrytí
s textom '?':
<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').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
