A fadeIn metódus
A fadeIn metódus lágyan megjeleníti az elrejtett
elemeket, azokat átlátszatlanná téve. Az elemeket
elrejthetjük a
fadeOut metódussal,
azokat átlátszóvá téve.
Szintaxis
Megjelenítés meghatározott idő alatt,
alapértelmezetten 400ms:
.fadeIn(időtartam);
Az időt nem csak ezredmásodpercben lehet megadni,
hanem kulcsszavakkal is: slow (600ms)
és fast (200ms), minél nagyobb az érték,
annál lassabb az animáció:
.fadeIn('slow' vagy 'fast');
Ha nem adunk meg paramétereket - nem lesz animáció, az elemek azonnal megjelennek:
.fadeIn();
Második paraméterként átadhatunk egy easing függvényt, valamint harmadikként egy callback függvényt - amely az animáció befejezése után fut le. Mindkét paraméter opcionális:
.fadeIn(időtartam, [easing függvény], [callback függvény]);
Különböző beállításokat adhatunk át a metódusnak, JavaScript objektum formájában, amely kulcs: érték párokat tartalmaz:
.fadeIn(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 a
animate metódusnál nézhetjük meg. Például,
állítsuk be az időtartamot és az easing függvényt:
.fadeIn( {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">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);
});
Példa
A következő példában a
#test elem megjelenítésének animációja
befejezése után kiírunk egy üzenetet
a '!' szöveggel, az elrejtés
után pedig a '?' szöveggel:
<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('?');
});
});
