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:

javascript.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:

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

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

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

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

javascript.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:

html<button id="hide">verberg</button>
<button id="show">wys</button>
<div id="test"></div>

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

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

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

Sien ook