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
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Efecte jQuery simple de ascundere si afisare

Last accessed pages

  1. Data si Timp - Obiect Date (2)
  2. Incarcare imagini pe server si afisare cu Ajax (6)
  3. Curs si Tutoriale Ajax (66)
  4. Bubbles3 (3489)
  5. Prezentul simplu - Exercitii si teste incepatori (758)

Popular pages this month

  1. Bubbles3 (3489)
  2. Gramatica limbii engleze - Prezentare Generala (2797)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2526)
  4. Butterfly Kyodai (2204)
  5. Zuma Deluxe (2083)