Metoda slideToggle
Metoda slideToggle shfaq në mënyrë të qetë
elemente të fshehur dhe fsheh ato të shfaqura.
Sintaksa
Shfaqje/Fshehje për një kohë të caktuar,
400ms si parazgjedhje:
.slideToggle(kohëzgjatja);
Koha mund të specifikohet jo vetëm në milisekonda,
por edhe me fjalët kyçe slow (600ms)
dhe fast (200ms), sa më e madhe të jetë vlera,
aq më e ngadaltë është animacioni:
.slideToggle('slow' ose 'fast');
Nëse nuk specifikohen parametra - nuk do të ketë animacion, elementet do të shfaqen/fshihen në çast:
.slideToggle();
Gjithashtu mund të kaloni si parametër të dytë një funksion përshpejtimi (easing), dhe si parametër të tretë një funksion callback - i cili do të ekzekutohet pas përfundimit të animacionit. Të dy parametrat janë opsional:
.slideToggle(kohëzgjatja, [funksion përshpejtimi], [funksion callback]);
Metodës mund t'i dërgohen opsione të ndryshme, në formën e një objekti JavaScript, që përmban çiftet çelës: vlerë:
.slideToggle(opsione);
Një objekt i tillë mund të kalojë parametrat dhe funksionet
në vijim - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Përshkrimi
i këtyre parametrave mund të gjenden për metodën
animate. Për shembull,
le të vendosim kohëzgjatjen dhe funksionin e përshpejtimit:
.slideToggle( {duration: 600, easing: easeInSine} );
Shembull
Le të fshehim në mënyrë të qetë, pas klikimit të butonit,
div prind, i cili përmban paragrafë,
duke përdorur metodën slideToggle (këtë div
do ta gjejmë duke përdorur metodën
parent),
pas një klikimi të dytë të butonit, div do të
shfaqet përsëri në mënyrë të qetë e kështu me radhë. Duke kaluar fjalën kyçe
slow, ne do të vendosim shpejtësinë në 600ms:
<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');
});
