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:

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

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

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

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

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

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

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

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

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 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">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

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

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

Shihni gjithashtu