Metode fadeOut
Die metode fadeOut verberg
elemente geleidelijk. Elemente kan getoon word met die metode
fadeIn,
deur hulle ondeursigtig te maak.
Sintaksis
Vertoon vir 'n gegewe tyd,
400ms by verstek:
.fadeOut(duur);
Tyd kan nie net in millisekondes gespesifiseer word nie,
maar ook met sleutelwoorde slow (600ms)
en fast (200ms), hoe groter die waarde,
hoe stadiger die animasie:
.fadeOut('slow' of 'fast');
As geen parameters gespesifiseer word nie - animasie sal nie plaasvind nie, elemente sal oombliklik verberg word:
.fadeOut();
Jy kan ook 'n vloei-funksie as tweede parameter deurgee, sowel as 'n derde callback-funksie - wat sal uitvoer na voltooiing van die animasie. Albei parameters is opsioneel:
.fadeOut(duur, [vloei-funksie], [callback-funksie]);
Verskeie opsies kan aan die metode oorgedra word, in die vorm van 'n JavaScript-objek, wat paar sleutel: waarde bevat:
.fadeOut(opsies);
So 'n objek kan die volgende
parameters en funksies oordra - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Beskrywing
van hierdie parameters kan jy sien vir die metode
animate. Byvoorbeeld,
laat ons die duur en vloei-funksie stel:
.fadeOut( {duration: 800, easing: easeInSine} );
Voorbeeld
In die volgende voorbeeld, wanneer op die knoppie
#hide gedruk word, sal die element met #test
verberg word met behulp van die metode fadeOut,
en op die knoppie #show - vertoon word, met
behulp van fadeIn. Ons sal ook die
spoed op 1000ms stel:
<button id="hide">verberg</button>
<button id="show">wys</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);
});
Voorbeeld
En in die volgende voorbeeld, na voltooiing
van die animasie wanneer die element #test vertoon word, sal ons
'n boodskap uitvoer
met die teks '!', en wanneer dit verberg word
met die teks '?':
<button id="hide">verberg</button>
<button id="show">wys</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('?');
});
});
