Metoda fadeIn
Metoda fadeIn plynule zobrazuje skryté
prvky, čímž je učiní neprůhlednými. Skrýt
prvky lze pomocí metody
fadeOut,
čímž je učiní průhlednými.
Syntaxe
Zobrazení po zadanou dobu,
400ms ve výchozím nastavení:
.fadeIn(doba-trvaní);
Čas lze zadat nejen v milisekundách,
ale i klíčovými slovy slow (600ms)
a fast (200ms), čím větší hodnota,
tím pomalejší animace:
.fadeIn('slow' nebo 'fast');
Pokud nezadáte parametry - animace nebude, prvky se zobrazí okamžitě:
.fadeIn();
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é:
.fadeIn(doba-trvaní, [funkce-pro-plynulost], [callback-funkce]);
Metodě lze předat různé volby, ve formě JavaScriptového objektu obsahujícího dvojice klíč: hodnota:
.fadeIn(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ů naleznete u metody
animate. Například,
nastavíme dobu trvání a funkci pro plynulost:
.fadeIn( {duration: 800, easing: easeInSine} );
Příklad
V následujícím příkladu po kliknutí na tlačítko
#hide bude prvek s #test
skryt pomocí metody fadeOut,
a po kliknutí na tlačítko #show - zobrazen,
pomocí fadeIn. Rychlost také nastavíme
na 1000ms:
<button id="hide">skrýt</button>
<button id="show">zobrazit</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);
});
Příklad
A v následujícím příkladu po skončení
animace při zobrazení prvku #test
vypíšeme zprávu
s textem '!', a při skrytí
s textem '?':
<button id="hide">skrýt</button>
<button id="show">zobrazit</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('?');
});
});
