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:
.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:
.fadeIn('slow' vai 'fast');
Ja neieraksta parametrus - animācijas nebūs, elementi tiks parādīti acumirklī:
.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:
.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:
.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:
.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:
<button id="hide">paslēpt</button>
<button id="show">rādīt</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#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 '?':
<button id="hide">paslēpt</button>
<button id="show">rādīt</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
