Metoden fadeOut
Metoden fadeOut skjuler
elementer jevnt. Vis elementer ved hjelp av metoden
fadeIn,
som gjør dem ugjennomsiktige.
Syntaks
Visning over en gitt varighet,
400ms som standard:
.fadeOut(varighet);
Tid kan angis ikke bare i millisekunder,
men også med nøkkelordene slow (600ms)
og fast (200ms), jo høyere verdi,
jo saktere animasjon:
.fadeOut('slow' eller 'fast');
Hvis du ikke angir parametere - vil animasjonen ikke skje, elementer vil bli skjult umiddelbart:
.fadeOut();
Du kan også sende en easing-funksjon som andre parameter, og en tredje callback-funksjon - som utløses etter at animasjonen er fullført. Begge parameterne er valgfrie:
.fadeOut(varighet, [easing-funksjon], [callback-funksjon]);
Du kan sende metoden ulike alternativer, i form av et JavaScript-objekt som inneholder par nøkkel: verdi:
.fadeOut(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:
.fadeOut( {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
ferdig når elementet #test vises, vil vi
vise en melding
med teksten '!', og når det skjules
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('?');
});
});
