fadeTo-metodi

fadeTo -metodi muuttaa läpinäkyvyyden pehmeästi annettuun arvoon, arvovälillä 0 - 1.

Syntaksi

Kesto ja läpinäkyvyys asetetaan metodin kaikissa käyttötavoissa. Läpinäkyvyyden muutos annetussa ajassa, oletusarvoisesti 400ms:

.fadeTo(kesto, läpinäkyvyysarvo);

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

.fadeTo('slow' tai 'fast', läpinäkyvyysarvo);

Voi myös kolmannena (valinnaisena) parametrina antaa callback-funktion - suoritetaan animaation jälkeen:

.fadeTo(kesto, läpinäkyvyysarvo, [callback-funktio]);

Voi myös antaa easing-funktion ja callback-funktion (valinnaiset parametrit) - suoritetaan animaation jälkeen:

.fadeTo(kesto, läpinäkyvyysarvo, [easing-funktio], [callback-funktio]);

Esimerkki

Seuraavassa esimerkissä, fadeTo -metodilla kun painetaan painiketta #hide elementti #test piilotetaan vähentämällä läpinäkyvyyttä arvoon 0.5, ja painiketta #show painettaessa - näytetään:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

Katso myös

metodi fadeToggle,
joka vaihtaa elementtien läpinäkyvyyttä
metodi fadeIn,
joka näyttää piilotetut elementit pehmeästi, tekemällä niistä läpinäkymättömiä
metodi animate,
joka animoi elementtien ominaisuuksia