Metóda fadeIn
Metóda fadeIn plynulo zobrazí skryté
prvky, čím ich urobí nepriehľadnými. Skryť
prvky je možné pomocou metódy
fadeOut,
čím sa stanú priehľadnými.
Syntax
Zobrazenie po zadaný čas,
400ms predvolené:
.fadeIn(dĺžka trvania);
Č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:
.fadeIn('slow' alebo 'fast');
Ak nešpecifikujete parametre - animácia nebude, prvky sa zobrazia okamžite:
.fadeIn();
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é:
.fadeIn(dĺžka trvania, [funkcia plynulosti], [callback funkcia]);
Metóde je možné odovzdať rôzne možnosti, vo forme JavaScript objektu, obsahujúceho páry kľúč: hodnota:
.fadeIn(možnosti);
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 dĺžku trvania a funkciu plynulosti:
.fadeIn( {duration: 800, easing: easeInSine} );
Príklad
V nasledujúcom príklade po kliknutí na tlačidlo
#hide sa prvok s #test
skryje pomocou metódy fadeOut,
a po kliknutí na tlačidlo #show - zobrazí, 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í prvku #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('?');
});
});
