jQuery fadeIn si fadeOut

Curs Javascript

• Metoda fadeToggle
• Metoda fadeTo

Un alt mod de a afisa si ascunde elemente in pagina este cu fadeIn si fadeOut, care mereu creaza un efect animat.

fadeIn() si fadeOut()

Aceste doua metode jQuery au urmatoarele sintaxe:

$('selector').fadeIn('durata');

$('selector').fadeOut('durata');

- fadeIn() - afiseaza elementele selectate, marind treptat valoarea opacitatii de la 0 la 100%.
- fadeOut() - ascunde elementele selectate, facandu-le treptat transparente.
- "durata" - (optional) indica durata efectului. Poate fi unul din sirurile: "fast" si "slow", sau un numar ce indica durata in milisecunde.

Pentru a executa anumite instructiuni dupa ce efectul de afisare sau ascundere se termina, se folosesc urmatoarele sintaxe:

$('selector').fadeIn('durata', function() {
  // cod executat cand fadeIn e finalizat
});

$('selector').fadeOut('durata', function() {
  // cod executat cand fadeOut e finalizat
});

Metodele fadeIn() si fadeOut() anima opacitatea elementelor selectate, precum in urmatorul exemplu:

<style type="text/css"><!--
#shw, #cls {
 cursor:pointer;
 text-decoration:underline;
}
#menu {
 display:none;
 background:#bbdafe;
}
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se da click pe tag-ul cu id="shw"
  $('#shw').click(function() {
    // face vizibil tag-ul cu id="menu"
    $('#menu').fadeIn(1200);
  });

  // cand se da click pe tag-ul cu id="cls"
  $('#cls').click(function() {
    // ascunde elementul cu id="menu", apoi executa o functie ce adauga o culoare la #shw
    $('#menu').fadeOut('slow', function() {
      $('#shw').css('color', '#fe0708');
    });
  });
});
--></script>

<h5 id="shw">Afisare meniu</h5>
<ul id="menu">
 <li>Efect jQuery, tutorial fadeIn si fadeOut.</li>
 <li>marplo.net/javascript/</li>
 <li>http://api.jquery.com/category/effects/<br />
 <h5 id="cls">Inchide meniu</h5></li>
</ul>

Ca sa vedeti efectul, dati click pe "Afisare meniu", apoi pe "Inchide meniu" (vedeti si explicatiile din cod):

Metoda fadeToggle

jQuery are o alta metoda utila care afiseaza si ascunde elemente in pagina web, fadeToggle(). Aceasta functie poate efectua ambele efecte, fadeIn si fadeOut. Daca elementul e vizibil, aplica fadeOut si-l ascunde, daca e ascuns, aplica fadeIn si-l face vizibil.
Sintaxa:

$('selector').fadeToggle('durata');

• Sau, ca sa executati o functie cand efectul e complet, se foloseste formula:

$('selector').fadeToggle('durata', function() {
  // cod executat cand efectul se termina
});

- "durata" - (optional) indica durata efectului. Poate fi unul din sirurile: "fast" si "slow", sau un numar ce indica durata in milisecunde.

Exemplu (afiseaza si ascunde un meniu cand se da click pe un anumit buton, retine si afiseaza numarul de click-uri):

<style type="text/css"><!--
#menu {
 display:none;
 background:#bbdafe;
}
--></style>

<script type="text/javascript"><!--
var cnts = 0;          // seteaza o variabila ce retine numarul de click-uri

$(document).ready(function() {
  // la click pe tag-ul cu id="btn"
  $('#btn').click(function() {
    // aplica fadeToggle la #menu, cu o durata de 1000 milisecunde
    // apoi mareste valoarea lui "cnts" cu o unitate si o adauga in tag-ul cu id="cnt"
    $('#menu').fadeToggle(1000, function() {
      cnts++;
      $('#cnt').text(cnts);
    });
  });
});
--></script>

Numar click-uri: <b id="cnt">0</b>
<button id="btn">Afisaza/Ascunde</button>
<ul id="menu">
 <li>Efect jQuery, tutorial fadeIn si fadeOut.</li>
 <li>marplo.net/javascript/</li>
 <li>http://api.jquery.com/category/effects/</li>
</ul>

Apasati de cateva ori pe butonul urmator, ca sa vedeti efectul.

Metoda fadeTo

Pentru a aplica doar partial fadeIn sau fadeOut, pana la o anumita valoare a opacitatii, se poate folosi metoda fadeTo():

$('selector').fadeTo('durata', alpha);

Sau, ca sa executati o functie cand efectul e finalizat, se foloseste formula:

$('selector').fadeOut('durata', alpha, function() {
  // cod executat cand efectul e finalizat
});

- "durata" - (optional) indica durata efectului. Poate fi unul din sirurile: "fast" si "slow", sau un numar ce indica durata in milisecunde.
- alpha - reprezinta "opacitatea" (sau transparenta), e similar cu transparenta din CSS.

Exemplu:

<style type="text/css"><!--
#div1 { position:absolute; background:#a2a3fe; width:100px; height:80px; top:0; margin:0; }
#div2 { position:absolute; background:#a5f8a5; width:90px; height:80px; top:12px; left:65px; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // cand mouse-ul e pe DIV-uri
  $('div').mouseover(function() {
    // estompeaza DIV-ul curent, cu o durata de 1250 milisecunde si opacitate 0.8
    $(this).fadeTo(1250, 0.8);
  });
});
--></script>

<h3>Sa ai o viata buna</h3>
<div id="div1"></div>
<div id="div2"></div>

Codul din acest exemplu creaza un efect de opacitate (sau transparenta) cu valoarea 0.8, cand mouse-ul e pe un DIV; efectul durand 1250 milisecunde.
Demo: