A fadeIn metódus

A fadeIn metódus lágyan megjeleníti az elrejtett elemeket, azokat átlátszatlanná téve. Az elemeket elrejthetjük a fadeOut metódussal, azokat átlátszóvá téve.

Szintaxis

Megjelenítés meghatározott idő alatt, alapértelmezetten 400ms:

javascript.fadeIn(időtartam);

Az időt nem csak ezredmásodpercben lehet megadni, hanem kulcsszavakkal is: slow (600ms) és fast (200ms), minél nagyobb az érték, annál lassabb az animáció:

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

Ha nem adunk meg paramétereket - nem lesz animáció, az elemek azonnal megjelennek:

javascript.fadeIn();

Második paraméterként átadhatunk egy easing függvényt, valamint harmadikként egy callback függvényt - amely az animáció befejezése után fut le. Mindkét paraméter opcionális:

javascript.fadeIn(időtartam, [easing függvény], [callback függvény]);

Különböző beállításokat adhatunk át a metódusnak, JavaScript objektum formájában, amely kulcs: érték párokat tartalmaz:

javascript.fadeIn(options);

Egy ilyen objektum a következő paramétereket és függvényeket adhatja át - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Ezen paraméterek leírását a animate metódusnál nézhetjük meg. Például, állítsuk be az időtartamot és az easing függvényt:

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

Példa

A következő példában a #hide gombra kattintva a #test elem elrejtésre kerül a fadeOut metódussal, a #show gombra kattintva pedig megjelenik, a fadeIn metódussal. A sebességet is beállítjuk 1000ms-ra:

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);
});

Példa

A következő példában a #test elem megjelenítésének animációja befejezése után kiírunk egy üzenetet a '!' szöveggel, az elrejtés után pedig a '?' szöveggel:

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('?');
  });
});

Lásd még