Metoda fadeIn
Metoda fadeIn shfaq në mënyrë të qetë elementet e fshehura,
duke i bërë ato jo të tejdukshëm. Elementet mund të fshihen
duke përdorur metodën
fadeOut,
duke i bërë ato të tejdukshëm.
Sintaksa
Shfaqje për një kohë të caktuar,
400ms si parazgjedhje:
.fadeIn(kohëzgjatja);
Koha mund të specifikohet jo vetëm në milisekonda,
por edhe me fjalët kyçe slow (600ms)
dhe fast (200ms), sa më e madhe të jetë vlera,
aq më e ngadaltë është animacioni:
.fadeIn('slow' ose 'fast');
Nëse nuk specifikohen parametra - nuk do të ketë animacion, elementet do të shfaqen në çast:
.fadeIn();
Gjithashtu mund të kaloni si parametër të dytë një funksion të lëvizjes, dhe si parametër të tretë një funksion callback - i cili do të ekzekutohet pas përfundimit të animacionit. Të dy parametrat nuk janë të detyrueshëm:
.fadeIn(kohëzgjatja, [funksion lëvizjeje], [funksion callback]);
Metodës mund t'i dërgohen opsione të ndryshme, në formën e një objekti JavaScript, që përmban çifte çelës: vlerë:
.fadeIn(opsione);
Një objekt i tillë mund të kalojë parametrat dhe funksionet
në vijim - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Përshkrimi
i këtyre parametrave mund të shihet për metodën
animate. Për shembull,
le të vendosim kohëzgjatjen dhe funksionin e lëvizjes:
.fadeIn( {duration: 800, easing: easeInSine} );
Shembull
Në shembullin në vijim, kur klikohet butoni
#hide elementi me #test do të
fshihet duke përdorur metodën fadeOut,
kurse kur klikohet butoni #show - do të shfaqet, me
ndihmën e fadeIn. Gjithashtu do të vendosim
shpejtësinë në 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);
});
Shembull
Kurse në shembullin në vijim, pas përfundimit
të animacionit gjatë shfaqjes së elementit #test ne
do të shfaqim një mesazh
me tekstin '!', kurse gjatë fshehjes
me tekstin '?':
<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('?');
});
});
