Efecte jQuery simple de ascundere si afisare

Curs Javascript

• Afisare Elemente
• Verificare daca un element e vizibil sau ascuns
• Efecte cu toggle()

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:
- 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:

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:

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.