Metoden fadeIn
Metoden fadeIn visar dolda
element mjukt genom att göra dem ogenomskinliga. Dölj
element kan göras med metoden
fadeOut,
genom att göra dem genomskinliga.
Syntax
Visning under given tid,
400ms som standard:
.fadeIn(varaktighet);
Tiden kan anges inte bara i millisekunder,
utan också med nyckelorden slow (600ms)
och fast (200ms), ju högre värde,
desto långsammare animation:
.fadeIn('slow' eller 'fast');
Om parametrar inte anges - animation kommer inte att ske, element kommer att visas omedelbart:
.fadeIn();
Man kan också skicka easing-funktionen som en andra parameter, samt en tredje callback-funktion - triggas efter utförande av animationen. Båda parametrarna är valfria:
.fadeIn(varaktighet, [easing-funktion], [callback-funktion]);
Man kan skicka olika alternativ till metoden, i form av ett JavaScript-objekt som innehåller par nyckel: värde:
.fadeIn(options);
Ett sådant objekt kan skicka följande
parametrar och funktioner - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Beskrivning
av dessa parametrar kan du se för metoden
animate. Till exempel,
låt oss ställa in varaktighet och easing-funktion:
.fadeIn( {duration: 800, easing: easeInSine} );
Exempel
I följande exempel när knappen trycks
#hide kommer elementet med #test att
döljas med metoden fadeOut,
och på knappen #show - visas, med
fadeIn. Vi kommer också att ställa in
hastigheten till 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);
});
Exempel
Och i följande exempel efter avslutad
animation vid visning av element #test kommer vi
att visa ett meddelande
med texten '!', och vid döljande
med texten '?':
<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('?');
});
});
