Metoden fadeOut
Metoden fadeOut döljer
element mjukt. Visa element kan man med metoden
fadeIn,
genom att göra dem ogenomskinliga.
Syntax
Visning under given tid,
400ms som standard:
.fadeOut(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:
.fadeOut('slow' eller 'fast');
Om man inte anger parametrar - kommer ingen animation att ske, elementen kommer att döljas omedelbart:
.fadeOut();
Man kan också som andra parameter skicka en easing-funktion, samt som tredje en callback-funktion - triggas efter att animationen är klar. Båda parametrarna är valfria:
.fadeOut(varaktighet, [easing-funktion], [callback-funktion]);
Man kan skicka metoden olika alternativ, i form av ett JavaScript-objekt, innehållande par nyckel: värde:
.fadeOut(options);
Sådan ett 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:
.fadeOut( {duration: 800, easing: easeInSine} );
Exempel
I följande exempel när man klickar på knappen
#hide kommer elementet med #test att
döljas med metoden fadeOut,
och på knappen #show - visas, med
fadeIn. Vi sätter också
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 elementet #test kommer vi
att skriva ut 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('?');
});
});
