Metode fadeOut
Metode fadeOut gludi paslēpj
elementus. Rādīt elementus var ar metodi
fadeIn,
padarot tos necaurspīdīgus.
Sintakse
Rādīšana noteiktā laikā,
400ms pēc noklusējuma:
.fadeOut(duration);
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:
.fadeOut('slow' vai 'fast');
Ja neieraksta parametrus - animācijas nebūs, elementi tiks paslēpti acumirklī:
.fadeOut();
Var arī otro parametru nodot gludināšanas funkciju, un arī trešo callback funkciju - darbosies pēc animācijas pabeigšanas. Abi parametri nav obligāti:
.fadeOut(duration, [gludināšanas funkcija], [callback funkcija]);
Var nodot metodei dažādas opcijas, JavaScript objekta veidā, kas satur pārus atslēga: vērtība:
.fadeOut(options);
Šā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 gludināšanas funkciju:
.fadeOut( {duration: 800, easing: easeInSine} );
Piemērs
Nākamajā piemērā, nospiežot pogu
#hide elements ar #test tiks
paslēpts ar metodi fadeOut,
un uz pogas #show - rādīts, 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 nākamajā piemērā pēc
animācijas pabeigšanas, rādot elementu #test mēs
izvadīsim ziņojumu
ar tekstu '!', un slē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('?');
});
});
