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
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
jQuery slideDown si SlideUp

Last accessed pages

  1. Lectii audio-video de limba engleza (4610)
  2. Exemple de conversatii in limba engleza (860)
  3. Scriere cod CSS (740)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (19365)
  5. Introducere (412)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2324)
  2. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1197)
  3. Creare si editare pagini HTML (1171)
  4. Curs HTML gratuit Tutoriale HTML5 (982)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (886)