Metoda fadeToggle

Metoda fadeToggle afișează sau ascunde alternativ elementele în mod lin, animându-le transparența.

Sintaxă

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

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

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

Dacă parametrii nu sunt specificați - animația nu va avea loc, elementele se vor afișa/ascunde instantaneu:

.fadeToggle();

De asemenea, ca al doilea parametru poate fi transmisă o funcție de easing, și ca al treilea parametru o funcție callback - se execută după finalizarea animației. Ambii parametri sunt opționali:

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

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

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

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

Exemplu

În exemplul următor, la primul click pe butonul #toggle elementul cu #test va fi ascuns, iar la click repetat - va fi afișat. Pentru asta folosim metoda fadeToggle. De asemenea vom seta viteza la 1000ms și valoarea funcției de easing la linear:

<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');
});

Vedeți și

metoda slideToggle,
care alternează afișarea/ascunderea lină a elementelor
metoda fadeTo,
care modifică transparența elementelor
metoda toggle,
care alternează afișarea/ascunderea elementelor
metoda animate,
care animează proprietățile elementelor