Metode fadeTo

Die metode fadeTo verander die deursigtigheid van 'n element gladjes na 'n gegewe waarde, in 'n reeks van 0 tot 1.

Sintaksis

Duur en deursigtigheid word gespesifiseer met enige variant van die metode. Verandering van deursigtigheid oor 'n gegewe tyd, 400ms by verstek:

.fadeTo(duur, deursigtigheidswaarde);

Tyd kan nie net in millisekondes gespesifiseer word nie, maar ook met sleutelwoorde slow (600ms) en fast (200ms), hoe hoër die waarde, hoe stadiger die animasie:

.fadeTo('slow' of 'fast', deursigtigheidswaarde);

'n Callback-funksie kan ook as 'n derde (opsionele) parameter oorgedra word - sal uitvoer na voltooiing van die animasie:

.fadeTo(duur, deursigtigheidswaarde, [callback-funksie]);

'n Gladvloeifunksie en callback-funksie (opsionele parameters) kan ook oorgedra word - sal uitvoer na voltooiing van die animasie:

.fadeTo(duur, deursigtigheidswaarde, [gladvloeifunksie], [callback-funksie]);

Voorbeeld

In die volgende voorbeeld, met behulp van die metode fadeTo, sal by druk op die knoppie #hide die element met #test verberg word deur die deursigtigheid te verminder na 0.5, en by #show - vertoon word:

<button id="hide">verberg</button>
<button id="show">wys</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);
});

Sien ook

metode fadeToggle,
wat die deursigtigheid van elemente verander
metode fadeIn,
wat verborge elemente gladjes wys, deur hulle ondeursigtig te maak
metode animate,
wat eienskappe van elemente animeer