A slideToggle metódus
A slideToggle metódus simán megjeleníti
az elrejtett elemeket és elrejti a megjelenítetteket.
Szintaxis
Megjelenítés/elrejtés meghatározott idő alatt,
alapértelmezetten 400ms:
.slideToggle(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ó:
.slideToggle('slow' vagy 'fast');
Ha nem adunk meg paramétereket - nem lesz animáció, az elemek azonnal megjelennek/elrejtődnek:
.slideToggle();
Második paraméterként átadhatunk egy easing függvényt is, valamint harmadik paraméterként egy callback függvényt - amely az animáció befejezése után fut le. Mindkét paraméter opcionális:
.slideToggle(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:
.slideToggle(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ézheti meg. Például,
állítsuk be az időtartamot és az easing függvényt:
.slideToggle( {duration: 600, easing: easeInSine} );
Példa
Nyomás után a gombra, rejtsük el simán
a szülő div elemet, amely a bekezdéseket tartalmazza,
a slideToggle metódus segítségével (ezt a div
elemet a
parent metódussal találjuk meg),
újabb gombnyomás után, a div elem
ismét simán megjelenik, stb. A slow kulcsszó
átadásával a sebességet 600ms-ra állítjuk:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
