A fadeOut metódus
A fadeOut metódus lágyan elrejti
az elemeket. Az elemek megjeleníthetők a
fadeIn
metódussal, átlátszatlanná téve azokat.
Szintaxis
Megjelenítés meghatározott idő alatt,
alapértelmezetten 400ms:
.fadeOut(időtartam);
Az idő nem csak milliszekundumban adható meg,
hanem kulcsszavakkal is: slow (600ms)
és fast (200ms), minél nagyobb az érték,
annál lassabb az animáció:
.fadeOut('slow' vagy 'fast');
Ha nincs paraméter megadva - nem lesz animáció, az elemek azonnal elrejtődnek:
.fadeOut();
A második paraméterként átadható egy easing függvény, a harmadik paraméterként pedig egy callback függvény - amely az animáció befejezése után fut le. Mindkét paraméter opcionális:
.fadeOut(időtartam, [easing függvény], [callback függvény]);
Átadhatunk a metódusnak különböző beállításokat, JavaScript objektum formájában, amely kulcs: érték párokat tartalmaz:
.fadeOut(options);
Egy ilyen objektum a következő
paramétereket és függvényeket adhatja át - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Ezen
paraméterek leírását megtalálhatod a
animate metódusnál. Például,
állítsuk be az időtartamot és az easing függvényt:
.fadeOut( {duration: 800, easing: easeInSine} );
Példa
A következő példában a #hide gombra kattintva
a #test elem
elrejtésre kerül a fadeOut metódussal,
a #show gombra kattintva pedig megjelenik, a
fadeIn metódussal. A sebességet is
beállítjuk 1000ms-ra:
<button id="hide">Elrejt</button>
<button id="show">Megjelenít</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élda
A következő példában a
#test elem megjelenítése animációja
befejezése után kiírunk egy üzenetet
a '!' szöveggel, az elrejtése
után pedig a '?' szöveggel:
<button id="hide">Elrejt</button>
<button id="show">Megjelenít</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('?');
});
});
