Metoda fadeToggle

Metoda fadeToggle izmenično gladko prikaže ali skrije elemente, tako da animira njihovo prosojnost.

Sintaksa

Prikaz/skrivanje v določenem času, 400ms privzeto:

.fadeToggle(trajanje);

Čas je mogoče nastaviti ne le v milisekundah, temveč tudi s ključnimi besedami slow (600ms) in fast (200ms), večja kot je vrednost, počasnejša je animacija:

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

Če parametrov ne navedete - animacije ne bo, elementi se bodo prikazali/skriti takoj:

.fadeToggle();

Kot drugi parameter lahko prav tako podate funkcijo za gladkost, in kot tretji callback funkcijo - se izvede po končani animaciji. Oba parametra sta neobvezna:

.fadeToggle(trajanje, [funkcija za gladkost], [callback-funkcija]);

Metodi lahko podate različne možnosti, v obliki JavaScript objekta, ki vsebuje pare ključ: vrednost:

.fadeToggle(možnosti);

Takšen objekt lahko prenaša naslednje parametre in funkcije - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Opis teh parametrov si lahko ogledate za metodo animate. Na primer, nastavimo trajanje in funkcijo za gladkost:

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

Primer

V naslednjem primeru ob prvem pritisku na gumb #toggle se bo element z #test skril, ob ponovnem pa prikazal. Za to uporabimo metodo fadeToggle. Prav tako bomo nastavili hitrost na 1000ms in vrednost funkcije za gladkost na 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');
});

Glejte tudi

metoda slideToggle,
ki izmenično gladko prikaže/skrije elemente
metoda fadeTo,
ki spreminja prosojnost elementov
metoda toggle,
ki izmenično gladko prikaže/skrije elemente
metoda animate,
ki animira lastnosti elementov