Exista mai multe moduri a a afisa si ascunde un element in pagina web cu jQuery, una dintre aceste metode este printr-o miscare animata de alunecare (glisare).

slideDown() si SlideUp()

Metoda slideDown() afiseaza elementele selectate printr-un efect de animare a inaltimii lor.
Metoda slideUp() ascunde elementele selectate, printr-un efect de glisare.
Aceste doua metode jQuery se folosesc cu urmatoarele sintaxe:
$('selector').slideDown('durata');
$('selector').SlideUp('durata');
- "durata" - (optional) indica durata efectului, care determina si viteza. Poate fi unul din sirurile "fast" si "slow", sau un numar ce specifica durata in milisecunde.

Pentru a executa anumite instructiuni dupa ce efectul e finalizat, se folosesc urmatoarele sintaxe:
$('selector').slideDown('durata', function() {
  // cod executat cand efectul slideDown se termina
});
$('selector').SlideUp('durata', function() {
  // cod executat cand efectul slideUp se termina
});

Exemplu cu slideDown

Afiseaza un <div> (cu id="dv1") folosind slideDown(), iar cand efectul se termina, afiseaza un alt <div> (cu id="dv2") in acelasi mod.
<style type="text/css"><!--
div { display:none; float:left; width:200px; height:100px; }
#dv1 {background:#0708fe; }
#dv2 {background:#07fe08; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // la click pe tag-ul cu id="btn" aplica slideDown la #dv1, apoi la #dv2
  $('#btn').click(function() {
    $('#dv1').slideDown(1000, function() {
      $('#dv2').slideDown(800);
    });
  });
});
--></script>

<div id="dv1">Aici poate fi un continut oarecare</div>
<div id="dv2">Un alt continut</div>
<button id="btn" style="clear:both;">Afiseaza</button>
Click pe butonul urmator ca sa vedeti efectul:

Exemplu cu slideUp

Cand se apasa un anumit buton, ascunde tag-urile <div> cu class="cls", apoi ascunde si butonul.
<style type="text/css"><!--
div.cls { float:left; width:200px; height:100px; }
#dv1 {background:#0708fe; }
#dv2 {background:#07fe08; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // la click pe tag-ul cu id="btn" ascunde toate DIV-urile cu class="cls"
  // apoi ascunde si butonul
  $('#btn').click(function() {
    $('div.cls').slideUp(1000, function() {
      $('#btn').slideUp('slow');
    });
  });
});
--></script>

<div id="dv1" class="cls">Aici poate fi un continut oarecare</div>
<div id="dv2" class="cls">Un alt continut</div>
<button id="btn" style="clear:both;">Ascunde</button>
Click pe butonul "Ascunde" ca sa vedeti efectul:
Aici poate fi un continut oarecare
Un alt continut

Metoda slideToggle()

slideToggle() afiseaza sau ascunde elementele selectate, prin animarea inaltimii lor. Daca elementul este vizibil, il ascunde, daca e ascuns, il face vizibil.
Sintaxa:
$('selector').slideToggle('durata');
• Sau, daca vreti sa executati o functie cand efectul e finalizat, se foloseste aceasta sintaxa:
$('selector').fadeToggle('durata', function() {
  // cod executat cand efectul se termina
});
- "durata" - (optional) indica durata efectului, care determina si viteza. Poate fi unul din sirurile "fast" si "slow", sau un numar ce specifica durata in milisecunde.

Eemplu. Un meniu vertical cu doua liste, care vor fi afisate cand mouse-ul e pe meniu, si le ascunde cand mouse-ul iese din zona meniului:
<style type="text/css"><!--
ul { float:left; cursor:pointer; }
li.cls {
 display:none;
 background:#e0e0fe;
}
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // cand mouse-ul intra sau iese din zona unui element UL, aplica slideToggle
  $('ul').hover(function() {
    $(this).find('.cls').slideToggle('slow');
  });
});
--></script>

<ul>
 <li>Cursuri gratuite</li>
 <li class="cls"><a href="https://marplo.net/html/">HTML</a></li>
 <li class="cls"><a href="https://marplo.net/css">CSS</a></li>
 <li class="cls"><a href="https://marplo.net/javascript/">Javascript</a></li>
</ul>
<ul>
 <li>Tutoriale</li>
 <li class="cls"><a href="https://marplo.net/flash/actionscript-3_e">ActionScript</a></li>
 <li class="cls"><a href="https://marplo.net/ajax/">Ajax</a></li>
 <li class="cls"><a href="https://marplo.net/javascript/curs-jquery-tutoriale-js">jQuery</a></li>
</ul>
<br style="clear:both;" />
- Metoda hover() e apelata de ambele evenimente mouseenter si mouseleave.
Acesta e rezultatul codului de mai sus. Mutati mouse-ul pe "Cursuri gratuite" si "Tutoriale".

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
jQuery slideDown si SlideUp

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (41387)
  2. Trecutul simplu si continuu - Past Tense Simple and Continuous (40511)
  3. Creare si editare pagini HTML (31741)
  4. Utilizare formulare HTML cu PHP, $_GET si $_POST (1852)
  5. Trecut perfect si Trecutul perfect continuu - Past perfect and Continuous (26069)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3137)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2842)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (2740)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (2519)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (2041)