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
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
jQuery fadeIn si fadeOut

Last accessed pages

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (46828)
  2. Lectii audio-video de limba engleza (9166)
  3. PHP PDO - exec INSERT UPDATE DELETE MySQL (468)
  4. Curs complet de limba engleza, incepatori (5623)
  5. Substantivul din limba engleza - The Noun (24820)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2915)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2056)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1561)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1210)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1179)