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):
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>marplo.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: 0

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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
jQuery fadeIn si fadeOut

Last accessed pages

  1. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (37500)
  2. Pronume - Exercitii si teste engleza incepatori (7633)
  3. Accentul si Pronuntia (14469)
  4. Limba spaniola curs online incepatori si avansati (16293)
  5. Curs si Tutoriale Ajax (33483)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1345)
  2. Curs HTML gratuit Tutoriale HTML5 (939)
  3. Curs si Tutoriale JavaScript (864)
  4. Curs si Tutoriale Ajax (842)
  5. Curs CSS Online Tutoriale CSS3 (803)