Metoden fadeIn
Metoden fadeIn viser skjulte
elementer jevnt, og gjør dem ugjennomsiktige. Skjul
elementer kan du med metoden
fadeOut,
ved å gjøre dem gjennomsiktige.
Syntaks
Visning over en gitt varighet,
400ms som standard:
.fadeIn(varighet);
Varighet kan angis ikke bare i millisekunder,
men også med nøkkelordene slow (600ms)
og fast (200ms), jo høyere verdi,
jo tregere animasjon:
.fadeIn('slow' eller 'fast');
Hvis du ikke angir parametere - vil animasjonen ikke skje, elementer vil vises øyeblikkelig:
.fadeIn();
Du kan også som andre parameter sende en easing-funksjon, og som tredje en callback-funksjon - som utløses etter at animasjonen er fullført. Begge parameterne er valgfrie:
.fadeIn(varighet, [easing-funksjon], [callback-funksjon]);
Du kan sende metoden ulike alternativer, i form av et JavaScript-objekt som inneholder par nøkkel: verdi:
.fadeIn(alternativer);
Et slikt objekt kan sende følgende
parametere og funksjoner - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Beskrivelse
av disse parameterne kan du se for metoden
animate. For eksempel,
la oss sette varighet og easing-funksjon:
.fadeIn( {duration: 800, easing: easeInSine} );
Eksempel
I følgende eksempel, når du klikker på knappen
#hide vil elementet med #test
skjules ved hjelp av metoden fadeOut,
og på knappen #show - vises, med
hjelp av fadeIn. Vi setter også
hastigheten til 1000ms:
<button id="hide">skjul</button>
<button id="show">vis</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);
});
Eksempel
Og i følgende eksempel, etter at
animasjonen er fullført ved visning av elementet #test, vil vi
vise en melding
med teksten '!', og ved skjuling
med teksten '?':
<button id="hide">skjul</button>
<button id="show">vis</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('?');
});
});
