jQuery slideDown si SlideUp

Curs Javascript

• Metoda slideToggle()

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:

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".