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 adauga rand nou in paragraf?
<b> <br> <p>
Prima linie ...<br>
Alta linie...
Ce proprietate CSS seteaza spatiu dintre litere?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
Ce functie obtine accesul la un element HTML cu un anumit ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Clic pe instructiunea "echo" utilizata corect.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Adresa URL: http://CoursesWeb.net";
Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?
will paint not paint have painted
She does not paint that landscape.
- Ea nu picteaza acel peisaj.
Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?
ir a cantar cantaba no cantar
Ella no canta esa canciĆ³n.
- Ea nu canta acel cantec.
Efecte jQuery simple de ascundere si afisare

Last accessed pages

  1. Por si Para (202)
  2. Verbe - Exercitii si teste engleza incepatori (2325)
  3. Confusable words - Cuvinte confundabile - Test Engleza (409)
  4. Verbe frazale din limba Engleza (2830)
  5. The Rise Of Atlantis (4416)

Popular pages this month

  1. Bubbles3 (5773)
  2. Gramatica limbii engleze - Prezentare Generala (5048)
  3. Butterfly Kyodai (3342)
  4. Jocuri Mahjong (2314)
  5. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (2171)