Metoda fadeToggle

Metoda fadeToggle në mënyrë alternative shfaq ose fsheh në mënyrë të butë elementet, duke animuar opacitetin e tyre.

Sintaksa

Shfaqje/Fshehje për një kohë të caktuar, 400ms si parazgjedhje:

javascript.fadeToggle(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 lartë të jetë vlera, aq më e ngadaltë është animacioni:

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

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

javascript.fadeToggle();

Gjithashtu, si parametër të dytë mund të kaloni një funksion 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.fadeToggle(kohëzgjatja, [funksion easing], [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.fadeToggle(opsione);

Një objekt i tillë mund të kalojë parametrat dhe funksionet e mëposhtme - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Përshkrimi i këtyre parametrave mund të gjendet për metodën animate. Për shembull, le të vendosim kohëzgjatjen dhe funksionin easing:

javascript.fadeToggle( {duration: 800, easing: easeInSine} );

Shembull

Në shembullin vijues, në shtypjen e parë të butonit #toggle elementi me #test do të fshihet, dhe në shtypjen e dytë - do të shfaqet. Për këtë ne përdorim metodën fadeToggle. Gjithashtu ne do të vendosim shpejtësinë në 1000ms dhe vlerën e funksionit easing në linear:

html<button id="toggle">toggle</button>
<div id="test"></div>

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

javascript$('#toggle').on('click', function() {
  $('#test').fadeToggle(1000, 'linear');
});

Shihni gjithashtu