Metoda slideToggle
Metoda slideToggle afișează lin
elementele ascunse și ascunde pe cele afișate.
Sintaxă
Afișare/ascundere în timpul stabilit,
400ms implicit:
.slideToggle(durată);
Timpul poate fi stabilit nu doar în milisecunde,
ci și prin cuvinte cheie slow (600ms)
și fast (200ms), cu cât valoarea este mai mare,
cu atât animația este mai lentă:
.slideToggle('slow' sau 'fast');
Dacă parametrii nu sunt specificați - animația nu va avea loc, elementele se vor afișa/ascunde instantaneu:
.slideToggle();
De asemenea, ca al doilea parametru poate fi transmisă o funcție de easing, și ca al treilea parametru o funcție callback - se va executa după finalizarea animației. Ambii parametri sunt opționali:
.slideToggle(durată, [funcție easing], [funcție callback]);
Metodei i se pot transmite diverse opțiuni, sub forma unui obiect JavaScript, care conține perechi cheie: valoare:
.slideToggle(opțiuni);
Un astfel de obiect poate transmite următorii
parametri și funcții - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Descrierea
acestor parametri o puteți consulta pentru metoda
animate. De exemplu,
să stabilim durata și funcția de easing:
.slideToggle( {duration: 600, easing: easeInSine} );
Exemplu
Haideți după apăsării butonului, să ascundem lin
div-ul părinte, care conține paragrafe,
cu ajutorul metodei slideToggle (acest div
îl vom găsi cu ajutorul metodei
parent),
după re-apăsarea butonului, div va fi
afisat din nou lin și așa mai departe. Transmițând cuvântul cheie
slow, vom stabili viteza la 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');
});
