Metoden fadeTo

Metoden fadeTo endrer jevnt gjennomsiktigheten til et element til en gitt verdi, i området fra 0 til 1.

Syntaks

Varighet og gjennomsiktighet angis med enhver variant av bruk av metoden. Endring av gjennomsiktighet over gitt tid, 400ms som standard:

.fadeTo(varighet, gjennomsiktighetsverdi);

Tid kan angis ikke bare i millisekunder, men også med nøkkelord slow (600ms) og fast (200ms), jo høyere verdi, jo saktere animasjon:

.fadeTo('slow' eller 'fast', gjennomsiktighetsverdi);

Man kan også som tredje (valgfri) parameter sende en callback-funksjon - vil utløses etter utførelse av animasjonen:

.fadeTo(varighet, gjennomsiktighetsverdi, [callback-funksjon]);

Man kan også sende en easing-funksjon og callback-funksjon (valgfrie parametere) - vil utløses etter utførelse av animasjonen:

.fadeTo(varighet, gjennomsiktighetsverdi, [easing-funksjon], [callback-funksjon]);

Eksempel

I følgende eksempel, ved hjelp av metoden fadeTo ved trykk på knappen #hide vil elementet med #test skjules ved å redusere gjennomsiktigheten til 0.5, og på #show - vises:

<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);
});

Se også

metoden fadeToggle,
som endrer gjennomsiktigheten til elementer
metoden fadeIn,
som jevnt viser skjulte elementer, gjør dem ugjennomsiktige
metoden animate,
som animerer egenskaper til elementer