Metodas toggle

Metodas toggle kaitalioja sklandų elementų rodymą/paslėpimą. Jei elementas yra rodomas, jis bus paslėptas ir atvirkščiai.

Sintaksė

Rodymas per nurodytą laiką milisekundėmis, 400ms pagal nutylėjimą:

.toggle(trukmė);

Laiką galima nurodyti ne tik milisekundėmis, bet ir raktažodžiais slow (600ms) ir fast (200ms), kuo didesnė reikšmė, tuo lėtesnė animacija:

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

Galima parametru display perduoti reikšmę true arba false. Jei true, elementas bus tik rodomas, false - paslėpiamas:

.toggle(display);

Jei nenurodyti parametrai - animacijos nebus, elementai bus rodomi/paslėpiami akimirksniu:

.toggle();

Taip pat antruoju parametru galima perduoti funkciją sklandumui, o trečiuoju callback funkciją - suveiks po animacijos vykdymo. Abu parametrai nėra privalomi:

.toggle(trukmė, [sklandumo funkcija], [callback funkcija]);

Galima tiesiog antru neprivalomu parametru perduoti callback funkciją - suveiks po animacijos vykdymo:

.toggle(trukmė, [callback funkcija]);

Metodui galima perduoti įvairias parinktis, JavaScript objekto pavidalu, kuriame yra poros raktas: reikšmė:

.toggle(options);

Toks objektas gali perduoti šiuos parametrus ir funkcijas - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Aprašymą šių parametrų galite peržiūrėti metodui animate. Pavyzdžiui, nustatykime trukmę ir sklandumo funkciją:

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

Pavyzdys

Po mygtuko paspaudimo, sklandžiai parodykime paslėptą pastraipą naudodami metodą toggle. Perduodami raktažodį slow, nustatysime greitį į 600ms. Paspaudus pakartotinai - paslėpsime:

<button>rodyti tekstą</button>
<p style="display: none">tekstas</p>

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

Žiūrėkite taip pat

metodas fadeToggle,
kuris keičia elementų permatomumą
metodas slideToggle,
kuris kaitalioja sklandų elementų rodymą/paslėpimą
metodas show,
kuris sklandžiai rodo elementus
metodas hide,
kuris sklandžiai paslepia elementus