In acest tutorial sunt prezentate cateva efecte simple ce pot fi create cu jQuery.

Ascundere Elemente

Pentru a ascunde un element in pagina, se poate folosi metoda hide().
Sintaxa
$('selector').hide('durata');
- "durata" - (optional) determina viteza animatiei de ascundere. Poate fi unul din sirurile "fast" si "slow", sau un numar care indica durata in milisecunde.

Exemplu:
<style type="text/css"><!--
.cls { cursor:pointer; text-decoration:underline; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se da click pe un <span> cu class="cls", ascunde elementul parinte
  $('span.cls').click(function(){
    $(this).parent().hide('slow');
  });
});
--></script>

<div>Cursuri gratuite Web Development, jQuery tutorial ... <span class="cls">Close</span>.</div>
<div>Alte cursuri de programare Web: marplo.net ... <span class="cls">Close</span>.</div>
Acest cod ascunde (cu o animatie "slow") elementele care contin un tag <span> cu class="cls", cand acesta e apasat.
Demo:
Cursuri gratuite Web Development, jQuery tutorial ... Close.
Alte cursuri de programare Web: marplo.net ... Close.

- Functia parent() - returneaza elementul parinte (cel in care este inclus).
- $(this).parent() - returneaza elementul parinte al obiectului curent.
In exemplul de mai sus, returneaza elementul HTML in care tag-ul <span> este inclus. In acest caz, metoda hide() va ascunde obiectul parinte si tot continutul lui (inclusiv acel <span> pe care se da click).
Daca vreti sa ascundeti doar obiectul curent, folositi:   $(this).hide();
Ca sa ascundeti un anume element, se foloseste:   $('#unElement').hide();

• Daca vreti sa fie executate anumite instructiuni dupa ce efectul de ascundere e complet, puteti folosi urmatoarea sintaxa:
$('selector').hide('durata', function() {
  // cod ce trebuie executat
});

Exemplu:
<style type="text/css"><!--
.cls { cursor:pointer; text-decoration:underline; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se da click pe un <span> cu class="cls", ascunde parintele lui
  $('span.cls').click(function(){
    $(this).parent().hide('slow', function() {
      alert('Inchis');
    });
  });
});
--></script>

<div>Cursuri gratuite Web Development, jQuery tutorial ... <span class="cls">Close</span>.</div>
<div>Alte cursuri de programare Web: marplo.net ... <span class="cls">Close</span>.</div>
De aceasta data am adaugat o functie cu un alert() sa fie executat cand efectul de ascundere e complet.
Demo:
Cursuri gratuite Web Development, jQuery tutorial ... Close.
Alte cursuri de programare Web: marplo.net ... Close.

Afisare Elemente

Pentru a face vizibil un element ascuns (de obicei cu display:none;), se foloseste metoda show().
Sintaxa:
$('selector').show('durata');
- "durata" - (optional) indica durata animatiei de afisare. Poate fi unul din sirurile "fast" and "slow", sau un numar ce seteaza durata in milisecunde.

Daca vreti sa fie executate anumite instructiuni dupa ce efectul de afisare e complet, se foloseste formula:
$('selector').show('durata', function() {
  // cod ce trebuie executat
});

Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // face vizibil tag-ul cu id="idd", cand tag-ul cu id="btn" e apasat
  $('#btn').click(function(){
    $('#idd').show('slow', function() {
      $('#btn').hide(650);
    });
  });
});
--></script>

<div id="idd" style="display:none;">Cursuri gratuite Web Development, jQuery tutorial.</div>
<button id="btn">Show</button>
Cand utilizatorul apasa pe butonul "Show", tag-ul <div> cu id="idd" este afisat, iar dupa ce efectul de afisare e complet, butonul va fi ascuns (in 650 milisecunde).
Demo:

Verificare daca un element e vizibil sau ascuns

Ca sa verificati daca un element e vizibl, puteti folosi urmatoarea formula:
if ($('#unID').is(':visible')) {
  // cod ce trebuie executat daca e vizibil
}
Ca sa testati daca un element e ascuns, se foloseste formula:
if ($('#unID').is(':hidden')) {
  // cod ce trebuie executat daca e ascuns
}

Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se apasa click pe tag-ul cu id="btn"
  $('#btn').click(function() {
    // daca tag-ul cu id="idd" e ascuns, il face vizibil (cu text albastru)
    if ($('#idd').is(':hidden')) {
      $('#idd').show('slow').css('color', 'blue');
    }
    else if ($('#idd').is(':visible')) {
      // altfel, daca este vizibil, ii adauga o culoare de fundal
      $('#idd').css('background', '#cdfecd');
    }
  });
});
--></script>
<div id="idd" style="display:none;">Div care este initial ascuns.</div>
<button id="btn">Click</button>
Tag-ul <div> este initial ascuns; cand utilizatorul apasa prima data pe butonul "Click" afiseaza tag-ul <div> (cu text albastru). Cand utilizatorul apasa a doua oara pe buton, adauga o culoare de fundal (cu background) la acel DIV.
Demo:

• Se poate folosi ":visible" si ":hidden" direct cu selectori: ("#unID:visible") si ("#unID:hidden"), pentru a selecta obiectul cand e vizibil, respectiv ascuns.
Astfel, o varianta optimizata a exemplului de mai sus e aceasta (efectul e la fel):
$(document).ready(function() {
  // cand se apasa click pe tag-ul cu id="btn"
  $('#btn').click(function() {
    $('#idd:visible').css('background', '#cdfecd');       // aduga background la #idd vizibil
    $('#idd:hidden').show('slow').css('color', 'blue');   // afiseaza #idd si adauga culoare albastra
  });
});

Efecte cu toggle()

Metoda toogle() inverseaza starea obiectului, il ascunde daca e vizibil, si-l afiseaza daca e ascuns.
$('selector').toogle('durata');
- "durata" - (optional) indica durata efectului de ascundere/afisare. Poate fi unul din sirurile "fast" si "slow", sau un numar care seteaza durata in milisecunde.

Ca sa executati anumite instructiuni dupa ce efectul e complet, se foloseste urmatoarea sintaxa:
$('selector').toogle('durata', function() {
  // cod ce trebuie executat
});

Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se da click pe tag-ul cu id="btn"
  $('#btn').click(function() {
    // inverseaza starea elementului cu "#idd"
    $('#idd').toggle(800, function() {
      // schimba textul din buton, in functie de starea lui "#idd" 
      if ($('#idd').is(':visible')) {
        $('#btn').text('Ascunde');
      } else {
        $('#btn').text('Afiseaza');
      }
    });
  });
});
--></script>
<div id="idd">Continut care va fi ascuns si iar facut vizibil.</div>
<button id="btn">Hide</button>
Codul de mai sus inverseaza starea ascuns/vizibil a <div>-ului cu id="idd", apoi se foloseste instructiunea is(':visible') ca sa verifice daca acest DIV e vizibil sau nu; in functie de starea lui schimba textul din buton.
Demo:
Continut care va fi ascuns si iar facut vizibil.

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.
Efecte jQuery simple de ascundere si afisare

Last accessed pages

  1. Jokes - Glume, Bancuri, Humor (2) (3121)
  2. Numerale, Numere in limba engleza - Numerals (25190)
  3. Subtantive - Plural (2165)
  4. Verbe neregulate din limba Engleza (8889)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (40302)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1976)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1677)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1575)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1434)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1167)