Metoda fadeOut
Metoda fadeOut fsheh në mënyrë të qetë
elementët. Elementët mund të shfahen duke përdorur metodën
fadeIn,
duke i bërë ata opak.
Sintaksa
Shfaqje për një kohë të caktuar,
400ms si parazgjedhje:
.fadeOut(kohëzgjatja);
Koha mund të specifikohet jo vetëm në milisekonda,
por edhe me fjalët kyç slow (600ms)
dhe fast (200ms), sa më e madhe të jetë vlera,
aq më e ngadaltë është animacioni:
.fadeOut('slow' ose 'fast');
Nëse nuk specifikohen parametra - nuk do të ketë animacion, elementët do të fshihen në çast:
.fadeOut();
Gjithashtu mund të kaloni si parametër të dytë një funksion përshpejtimi (easing), dhe si parametër të tretë një funksion callback - i cili do të ekzekutohet pas përfundimit të animacionit. Të dy parametrat janë opsional:
.fadeOut(kohëzgjatja, [funksion përshpejtimi], [funksion callback]);
Metodës mund t'i dërgohen opsione të ndryshme, në formën e një objekti JavaScript, që përmban çiftet çelës: vlerë:
.fadeOut(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ërshkrim
i këtyre parametrave mund të gjeni për metodën
animate. Për shembull,
le të vendosim kohëzgjatjen dhe funksionin e përshpejtimit:
.fadeOut( {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 me butonin #show - do të shfaqet, me
ndihmën e fadeIn. Gjithashtu do të vendosim
shpejtësinë në 1000ms:
<button id="hide">fsheh</button>
<button id="show">shfaq</button>
<div id="test"></div>
#test {
gjerësi: 200px;
lartësi: 200px;
sfond: jeshile;
ngjyrë: e bardhë;
margjinë-lart: 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">fsheh</button>
<button id="show">shfaq</button>
<div id="test"></div>
#test {
gjerësi: 200px;
lartësi: 200px;
sfond: jeshile;
ngjyrë: e bardhë;
margjinë-lart: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
