fadeIn Metode
Die metode fadeIn vertoon verborge
elemente stapsgewys deur hulle ondeursigtig te maak. Elemente kan weggesteek
word met behulp van die metode
fadeOut,
deur hulle deursigtig te maak.
Sintaksis
Vertoon vir 'n gegewe tyd,
400ms by verstek:
.fadeIn(duur);
Tyd kan nie net in millisekondes gespesifiseer word nie,
maar ook met die sleutelwoorde slow (600ms)
en fast (200ms), hoe hoër die waarde,
hoe stadiger die animasie:
.fadeIn('slow' of 'fast');
As geen parameters verskaf word nie - sal daar geen animasie wees nie, elemente sal onmiddellik verskyn:
.fadeIn();
'n Uitstapfunksie kan ook as tweede parameter oorgedra word, sowel as 'n derde callback-funksie - wat na voltooiing van die animasie sal uitvoer. Albei parameters is opsioneel:
.fadeIn(duur, [uitstapfunksie], [callback-funksie]);
Verskeie opsies kan aan die metode oorgedra word, in die vorm van 'n JavaScript-objek wat sleutel: waarde pare bevat:
.fadeIn(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 uitstapfunksie stel:
.fadeIn( {duration: 800, easing: easeInSine} );
Voorbeeld
In die volgende voorbeeld, wanneer op die knoppie
#hide gedruk word, sal die element met #test
weggesteek word met behulp van die metode fadeOut,
en op die knoppie #show - verskyn, met
behulp van fadeIn. Ons sal ook die
spoed op 1000ms stel:
<button id="hide">steek weg</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 die voltooiing
van die animasie wanneer die element #test vertoon word, sal ons
'n boodskap uitdruk
met die teks '!', en wanneer dit weggesteek word
met die teks '?':
<button id="hide">steek weg</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('?');
});
});
