jQuery slideDown si SlideUp

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:

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

Cursuri gratuite
HTML
CSS
Javascript

Tutoriale
ActionScript
Ajax
jQuery

<<-jQuery fadeIn si fadeOut -- jQuery - Animare proprietati ..->>

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

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