A fadeToggle metódus

A fadeToggle metódus felváltva lágyan megjeleníti vagy elrejti az elemeket, animálva azok áttetszőségét.

Szintaxis

Megjelenítés/elrejtés meghatározott idő alatt, alapértelmezetten 400ms:

.fadeToggle(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ó:

.fadeToggle('slow' vagy 'fast');

Ha nem adunk meg paramétereket - nem lesz animáció, az elemek megjelennek/elrejtőznek azonnal:

.fadeToggle();

Második paraméterként átadhatunk egy easing függvényt is, valamint harmadikként egy callback függvényt - amely az animáció befejezése után fut le. Mindkét paraméter opcionális:

.fadeToggle(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:

.fadeToggle(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 találod. Például, állítsuk be az időtartamot és az easing függvényt:

.fadeToggle( {duration: 800, easing: easeInSine} );

Példa

A következő példában az első gombnyomásra a #toggle gombra a #test elem elrejtődik, az ismételt megnyomásra pedig megjelenik. Ehhez a fadeToggle metódust használjuk. Beállítjuk a sebességet 1000ms-ra és az easing függvény értékét linear-ra:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Lásd még

a slideToggle metódus,
amely felváltva végzi az elemek lágy megjelenítését/elrejtését
a fadeTo metódus,
amely az elemek áttetszőségét változtatja
a toggle metódus,
amely felváltva végzi az elemek lágy megjelenítését/elrejtését
a animate metódus,
amely az elemek tulajdonságait animálja