Metode fadeIn

Metode fadeIn vienmērīgi parāda paslēptos elementus, padarot tos necaurspīdīgus. Paslēpt elementus var ar metodi fadeOut, padarot tos caurspīdīgus.

Sintakse

Parādīšana noteiktā laikā, 400ms pēc noklusējuma:

javascript.fadeIn(ilgums);

Laiku var norādīt ne tikai milisekundēs, bet arī atslēgvārdiem slow (600ms) un fast (200ms), jo lielāka vērtība, jo lēnāka animācija:

javascript.fadeIn('slow' vai 'fast');

Ja neieraksta parametrus - animācijas nebūs, elementi tiks parādīti acumirklī:

javascript.fadeIn();

Var arī otro parametru nodot vienmērīguma funkciju, un arī trešo callback funkciju - darbosies pēc animācijas pabeigšanas. Abi parametri nav obligāti:

javascript.fadeIn(ilgums, [vienmērīguma funkcija], [callback funkcija]);

Var nodot metodei dažādas opcijas, JavaScript objekta veidā, kas satur pārus atslēga: vērtība:

javascript.fadeIn(opcijas);

Šāds objekts var nodot sekojošus parametrus un funkcijas - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Aprakstu šiem parametriem var apskatīt metodei animate. Piemēram, iestatīsim ilgumu un vienmērīguma funkciju:

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

Piemērs

Sekojošā piemērā, nospiežot uz pogas #hide elements ar #test tiks paslēpts ar metodi fadeOut, un uz pogas #show - parādīsies, ar metodi fadeIn. Arī mēs iestatīsim ātrumu uz 1000ms:

html<button id="hide">paslēpt</button>
<button id="show">rādīt</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);
});

Piemērs

Un sekojošā piemērā pēc animācijas pabeigšanas, parādot elementu #test mēs izvadīsim ziņojumu ar tekstu '!', un paslēpjot ar tekstu '?':

html<button id="hide">paslēpt</button>
<button id="show">rādīt</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('?');
  });
});

Skatiet arī