jQuery fadeIn si fadeOut 7
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>www.discant.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):
Afisare meniu
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>www.discant.net/javascript/</li>
<li>http://api.jquery.com/category/effects/</li>
</ul>
Apasati de cateva ori pe butonul urmator, ca sa vedeti efectul.
Numar click-uri: 4
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:
Sa ai o viata buna