Metoden fadeIn
Metoden fadeIn viser skjulte
elementer jævnt ved at gøre dem uigennemsigtige. Skjul
elementer kan gøres med metoden
fadeOut,
ved at gøre dem gennemsigtige.
Syntaks
Visning over en given varighed,
400ms som standard:
.fadeIn(varighed);
Tid kan angives ikke kun i millisekunder,
men også med nøgleordene slow (600ms)
og fast (200ms), jo højere værdi,
jo langsommere animation:
.fadeIn('slow' eller 'fast');
Hvis parametre ikke angives - animation vil ikke forekomme, elementer vil blive vist øjeblikkeligt:
.fadeIn();
Det er også muligt at sende en easing-funktion som anden parameter, samt en tredje callback-funktion - udføres efter animationen. Begge parametre er valgfrie:
.fadeIn(varighed, [easing-funktion], [callback-funktion]);
Det er muligt at sende metoden forskellige indstillinger, i form af et JavaScript-objekt, der indeholder par nøgle: værdi:
.fadeIn(indstillinger);
Sådan et objekt kan sende følgende
parametre og funktioner - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Beskrivelse
af disse parametre kan du se for metoden
animate. For eksempel,
lad os indstille varigheden og easing-funktionen:
.fadeIn( {duration: 800, easing: easeInSine} );
Eksempel
I følgende eksempel, når der klikkes på knappen
#hide, vil elementet med #test
skjules ved hjælp af metoden fadeOut,
og på knappen #show - vises, med
hjælp af fadeIn. Vi indstiller også
hastigheden til 1000ms:
<button id="hide">hide</button>
<button id="show">show</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, efter afslutningen af
animationen ved visning af elementet #test, vil vi
vise en besked
med teksten '!', og ved skjuling
med teksten '?':
<button id="hide">hide</button>
<button id="show">show</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('?');
});
});
