Metoden toggle

Metoden toggle växlar mellan mjuk visning/döljning av element. Om elementet är synligt kommer det att döljas och vice versa.

Syntax

Visning under en given tid i millisekunder, 400ms som standard:

.toggle(varaktighet);

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

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

Man kan med parametern display skicka värdet true eller false. Om true kommer elementet bara att visas, false - att döljas:

.toggle(display);

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

.toggle();

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

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

Man kan helt enkelt som andra valfria parameter skicka en callback-funktion - som triggas efter att animationen är klar:

.toggle(varaktighet, [callback-funktion]);

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

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

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

Exempel

Låt oss efter att ha klickat på knappen, mjukt visa ett dolt stycke med metoden toggle. Genom att skicka nyckelordet slow ställer vi in hastigheten på 600ms. Vid ett nytt klick - dölja:

<button>visa text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Se även

metoden fadeToggle,
som ändrar opaciteten hos element
metoden slideToggle,
som växlar mellan mjuk visning/döljning av element
metoden show,
som mjukt visar element
metoden hide,
som mjukt döljer element