Metoda fadeOut
Metoda fadeOut plynule skrývá
prvky. Zobrazit prvky lze pomocí metody
fadeIn,
čímž je učiní neprůhlednými.
Syntaxe
Zobrazení po zadanou dobu,
400ms ve výchozím nastavení:
.fadeOut(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:
.fadeOut('slow' nebo 'fast');
Pokud nezadáte parametry - animace nebude, prvky budou skryty okamžitě:
.fadeOut();
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é:
.fadeOut(doba trvání, [funkce plynulosti], [callback funkce]);
Metodě lze předat různé volby, ve formě JavaScriptového objektu, obsahujícího dvojice klíč: hodnota:
.fadeOut(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 plynulosti:
.fadeOut( {duration: 800, easing: easeInSine} );
Příklad
V následujícím příkladu po stisknutí tlačítka
#hide bude prvek s #test
skryt pomocí metody fadeOut,
a po stisknutí tlačítka #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 dokonč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('?');
});
});
