Metode fadeOut

Die metode fadeOut verberg elemente geleidelijk. Elemente kan getoon word met die metode fadeIn, deur hulle ondeursigtig te maak.

Sintaksis

Vertoon vir 'n gegewe tyd, 400ms by verstek:

javascript.fadeOut(duur);

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

javascript.fadeOut('slow' of 'fast');

As geen parameters gespesifiseer word nie - animasie sal nie plaasvind nie, elemente sal oombliklik verberg word:

javascript.fadeOut();

Jy kan ook 'n vloei-funksie as tweede parameter deurgee, sowel as 'n derde callback-funksie - wat sal uitvoer na voltooiing van die animasie. Albei parameters is opsioneel:

javascript.fadeOut(duur, [vloei-funksie], [callback-funksie]);

Verskeie opsies kan aan die metode oorgedra word, in die vorm van 'n JavaScript-objek, wat paar sleutel: waarde bevat:

javascript.fadeOut(opsies);

So 'n objek kan die volgende parameters en funksies oordra - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrywing van hierdie parameters kan jy sien vir die metode animate. Byvoorbeeld, laat ons die duur en vloei-funksie stel:

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

Voorbeeld

In die volgende voorbeeld, wanneer op die knoppie #hide gedruk word, sal die element met #test verberg word met behulp van die metode fadeOut, en op die knoppie #show - vertoon word, met behulp van fadeIn. Ons sal ook die spoed op 1000ms stel:

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').fadeIn(1000);
});

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

Voorbeeld

En in die volgende voorbeeld, na voltooiing van die animasie wanneer die element #test vertoon word, sal ons 'n boodskap uitvoer met die teks '!', en wanneer dit verberg word met die teks '?':

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').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Sien ook