fadeToggle-metodi

fadeToggle-metodi vuorotellen pehmeästi näyttää tai piilottaa elementit, animoimalla niiden läpinäkyvyyttä.

Syntaksi

Näyttäminen/piilottaminen annetun ajan, 400ms oletusarvoisesti:

.fadeToggle(kesto);

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

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

Jos parametreja ei määritetä - animaatiota ei tule, elementit näkyvät/piiloutuvat välittömästi:

.fadeToggle();

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

.fadeToggle(kesto, [pehmennysfunktio], [callback-funktio]);

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

.fadeToggle(valinnat);

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

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

Esimerkki

Seuraavassa esimerkissä ensimmäisellä painalluksella painikkeessa #toggle elementti #test piiloutuu, ja toistuvalla - näkyy. Tätä varten käytämme fadeToggle-metodia. Myös asetaamme nopeudeksi 1000ms ja pehmennysfunktion arvoksi 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');
});

Katso myös

metodi slideToggle,
joka vuorottelee elementtien pehmeän näyttämisen/piilottamisen
metodi fadeTo,
joka muuttaa elementtien läpinäkyvyyttä
metodi toggle,
joka vuorottelee elementtien pehmeän näyttämisen/piilottamisen
metodi animate,
joka animoi elementtien ominaisuuksia