Metoden fadeToggle

Metoden fadeToggle växlar mjukt mellan att visa eller dölja element genom att animera deras opacitet.

Syntax

Visning/döljning under en given tid, 400ms som standard:

.fadeToggle(varaktighet);

Tiden kan anges inte bara i millisekunder, utan också med nyckelorden slow (600ms) och fast (200ms), ju högre värde, desto långsammare animation:

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

Om parametrar inte anges - kommer ingen animation att ske, elementen kommer att visas/döljas omedelbart:

.fadeToggle();

Man kan också som andra parameter skicka en easing-funktion, samt som tredje parameter en callback-funktion - som triggas efter att animationen är klar. Båda parametrarna är valfria:

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

Man kan skicka metoden olika alternativ, i form av ett JavaScript-objekt som innehåller par av nyckel: värde:

.fadeToggle(options);

Ett sådant objekt kan skicka följande parametrar och funktioner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivning av dessa parametrar kan du se för metoden animate. Till exempel, låt oss ställa in varaktighet och easing-funktion:

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

Exempel

I följande exempel kommer elementet med #test att döljas vid första klick på knappen #toggle, och vid upprepade klick - visas. För detta använder vi metoden fadeToggle. Vi kommer också att ställa in hastigheten till 1000ms och värdet för easing-funktionen till 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 även

metoden slideToggle,
som växlar mellan mjuk visning/döljning av element
metoden fadeTo,
som ändrar opaciteten för element
metoden toggle,
som växlar mellan mjuk visning/döljning av element
metoden animate,
som animerar egenskaper för element