Metoden fadeToggle

Metoden fadeToggle skifter mellem at vise eller skjule elementer jævnt ved at animere deres gennemsigtighed.

Syntaks

Visning/skjuling over en given varighed, standard er 400ms:

.fadeToggle(varighed);

Tid kan angives ikke kun i millisekunder, men også med nøgleordene slow (600ms) og fast (200ms), hvor højere værdi betyder langsommere animation:

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

Hvis parametre ikke angives - vil der ikke være nogen animation, elementer vil blive vist/skjult øjeblikkeligt:

.fadeToggle();

Man kan også sende en easing-funktion som anden parameter, samt en callback-funktion som tredje parameter - den udføres efter animationen er afsluttet. Begge parametre er valgfrie:

.fadeToggle(varighed, [easing-funktion], [callback-funktion]);

Man kan sende metoden forskellige indstillinger, i form af et JavaScript-objekt, der indeholder nøgleværdi-par nøgle: værdi:

.fadeToggle(indstillinger);

Et sådant objekt kan sende følgende parametre og funktioner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivelsen af disse parametre kan du se for metoden animate. For eksempel, lad os sætte varigheden og easing-funktionen:

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

Eksempel

I det følgende eksempel vil elementet med #test blive skjult ved første klik på knappen #toggle, og ved det næste klik vil det blive vist. For at gøre dette bruger vi metoden fadeToggle. Vi vil også indstille hastigheden til 1000ms og easing-funktionen 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 skifter mellem jævn visning/skjuling af elementer
metoden fadeTo,
som ændrer gennemsigtigheden af elementer
metoden toggle,
som skifter mellem jævn visning/skjuling af elementer
metoden animate,
som animerer egenskaber for elementer