Metoden fadeToggle

Metoden fadeToggle vekselvis viser eller skjuler elementer jevnt ved å animere deres gjennomsiktighet.

Syntaks

Vis/skjul over en gitt varighet, 400ms som standard:

.fadeToggle(varighet);

Tid kan angis ikke bare i millisekunder, men også med nøkkelordene slow (600ms) og fast (200ms), jo høyere verdi, desto tregere animasjon:

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

Hvis du ikke angir parametere - vil animasjonen ikke skje, elementene vil vises/skjules umiddelbart:

.fadeToggle();

Du kan også sende en easing-funksjon som andre parameter, samt en tredje callback-funksjon - som utløses etter at animasjonen er fullført. Begge parameterne er valgfrie:

.fadeToggle(varighet, [easing-funksjon], [callback-funksjon]);

Du kan sende metoden ulike alternativer, i form av et JavaScript-objekt som inneholder par nøkkel: verdi:

.fadeToggle(alternativer);

Et slikt objekt kan sende følgende parametere og funksjoner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivelse av disse parameterne kan du se for metoden animate. For eksempel, la oss sette varighet og easing-funksjon:

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

Eksempel

I følgende eksempel, ved første klikk på knappen #toggle vil elementet med #test skjules, og ved gjentatt klikk - vises. For dette bruker vi metoden fadeToggle. Også setter vi hastigheten til 1000ms og verdien for easing-funksjonen til 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');
});

Se også

metoden slideToggle,
som veksler mellom jevn visning/skjuling av elementer
metoden fadeTo,
som endrer gjennomsiktigheten til elementer
metoden toggle,
som veksler mellom jevn visning/skjuling av elementer
metoden animate,
som animerer egenskaper til elementer