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:

javascript.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:

javascript.fadeOut('slow' ose 'fast');

Nëse nuk specifikohen parametra - nuk do të ketë animacion, elementët do të fshihen në çast:

javascript.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:

javascript.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ë:

javascript.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:

javascript.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:

html<button id="hide">fsheh</button>
<button id="show">shfaq</button>
<div id="test"></div>

css#test {
  gjerësi: 200px;
  lartësi: 200px;
  sfond: jeshile;
  ngjyrë: e bardhë;
  margjinë-lart: 10px;
}

javascript$('#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 '?':

html<button id="hide">fsheh</button>
<button id="show">shfaq</button>
<div id="test"></div>

css#test {
  gjerësi: 200px;
  lartësi: 200px;
  sfond: jeshile;
  ngjyrë: e bardhë;
  margjinë-lart: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Shihni gjithashtu