Toggle-metodi

Metodi toggle vaihtelee elementtien sulavaa näyttämistä/piilottamista. Jos elementti on näkyvissä, se piilotetaan ja päinvastoin.

Syntaksi

Näyttäminen annetun ajan millisekunteina, 400ms oletusarvoisesti:

.toggle(kesto);

Ajan voi antaa ei vain millisekunteina, vaan myös avainsanoilla slow (600ms) ja fast (200ms), mitä suurempi arvo, sitä hitaampi animaatio:

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

Parametrilla display voi välittää arvon true tai false. Jos true, elementti tulee vain näkyviin, false - piiloutuu:

.toggle(display);

Jos parametreja ei määritetä - animaatiota ei tapahdu, elementit tulevat näkyviin/piiloutuvat hetkellisesti:

.toggle();

Voidaan myös toisena parametrina antaa funktio liukuvuudelle, sekä kolmantena callback-funktio - suoritetaan animaation valmistumisen jälkeen. Molemmat parametrit ovat valinnaisia:

.toggle(kesto, [liukuvuusfunktio], [callback-funktio]);

Voi yksinkertaisesti toisena valinnaisena parametrina antaa callback-funktion - suoritetaan animaation valmistumisen jälkeen:

.toggle(kesto, [callback-funktio]);

Metodille voi antaa erilaisia valintoja, JavaScript-objektin muodossa, joka sisältää parit avain: arvo:

.toggle(options);

Tällainen objekti voi välittää seuraavia parametreja ja funktioita - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Kuvaus näistä parametreista voit katsoa metodille animate. Esimerkiksi, asetetaan kesto ja liukuvuusfunktio:

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

Esimerkki

Laittakaamme painikkeen painamisen jälkeen, sulavasti näyttämään piilotetun kappaleen metodilla toggle. Antamalla avainsanan slow, asetamme nopeudeksi 600ms. Toistuvalla painalluksella - piilottaa:

<button>näytä teksti</button>
<p style="display: none">teksti</p>

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

Katso myös

metodi fadeToggle,
joka muuttaa elementtien läpinäkyvyyttä
metodi slideToggle,
joka vaihtelee elementtien sulavaa näyttämistä/piilottamista
metodi show,
joka sulavasti näyttää elementit
metodi hide,
joka sulavasti piilottaa elementit