Curs Javascript

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. Adaugare continut fisier in textarea (286)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (278883)
  3. Cursuri limba engleza gratuite si lectii online (67606)
  4. Saber vs Conocer Pedir vs Preguntar (1205)
  5. Imperfect - Verbe regulate (793)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (262)
  2. Gramatica limbii engleze - Prezentare Generala (138)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (131)
  4. Coduri pt culori (120)
  5. Cursuri limba engleza gratuite si lectii online (102)