jQuery fadeIn si fadeOut

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

<<-Adauga, Sterge, Modifica Atribute .. -- jQuery slideDown si SlideUp->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.