Metoda toggle

Metoda toggle alternează afișarea/ascunderea lină a elementelor. Dacă un element este afișat, acesta va fi ascuns și invers.

Sintaxă

Afișare în timpul specificat în milisecunde, 400ms implicit:

.toggle(durată);

Timpul poate fi specificat nu doar în milisecunde, ci și prin cuvintele cheie slow (600ms) și fast (200ms), cu cât valoarea este mai mare, cu atât animația este mai lentă:

.toggle('slow' sau 'fast');

Prin parametrul display se poate transmite valoarea true sau false. Dacă este true, elementul va fi doar afișat, false - ascuns:

.toggle(display);

Dacă nu sunt specificați parametri - nu va exista animație, elementele vor fi afișate/ascunse instantaneu:

.toggle();

De asemenea, ca al doilea parametru se poate transmite o funcție de easing, iar ca al treilea parametru o funcție callback - se va executa după finalizarea animației. Ambele parametri sunt opționale:

.toggle(durată, [funcție easing], [funcție callback]);

Poate fi transmisă doar ca al doilea parametru opțional o funcție callback - se va executa după finalizarea animației:

.toggle(durată, [funcție callback]);

Metodei i se pot transmite diverse opțiuni, sub forma unui obiect JavaScript, care conține perechi cheie: valoare:

.toggle(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 vedea pentru metoda animate. De exemplu, să setăm durata și funcția de easing:

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

Exemplu

După apăsarea butonului, să afișăm lin un paragraf ascuns cu ajutorul metodei toggle. Transmițând cuvântul cheie slow, vom seta viteza la 600ms. La re-apăsare - să-l ascundem:

<button>afișează text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Vedeți și

metoda fadeToggle,
care modifică opacitatea elementelor
metoda slideToggle,
care alternează afișarea/ascunderea lină a elementelor
metoda show,
care afișează lin elementele
metoda hide,
care ascunde lin elementele