Inlantuire Actiuni

Cu jQuery se pot adauga si executa mai multe comenzi la un element, una dupa alta. Acest lucru e numit "inlantuire".
Pentru a lega un efect (sau actiune), pur si simplu adaugati-l dupa ultimul, separat prin punct (.).
    De exemplu, se ascunde primul tag <h3>, apoi e afisat cu slideDown(), si iar dispare cu fadeOut():
$('h3:first').hide().slideDown('slow').fadeOut();
Puteti lega astfel (inlantui) oricate actiuni doriti.

Exemplu. Cand se apasa pe un buton, leaga una dupa alta: slideDown(), animate() (width si fontSize), inca un animate() (marginLeft, ca sa miste elementul), apoi ascunde butonul cu slideUp().
<style type="text/css"><!--
#dv1 { display:none; width:150px; height:90px; background:#dadefe; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // la click pe tag-ul cu id="btn", inlantuie cateva efecte
  // la un element cu id="dv1": slideDown(), animate(), si animate()
  // apoi ascunde butonul, cu slideUp()
  $('#btn').click(function() {
    $('#dv1')
      .slideDown('slow')
      .animate({ 'width':'250px', 'fontSize':'20px' }, 1800)
      .animate({ 'marginLeft':'+=100' }, 'slow', function() {
        $('#btn').slideUp(800);
      });
  });
});
--></script>

<div id="dv1">marplo.net</div>
<button id="btn">Click</button>
Demo:

Aplicare pauza - delay()

Daca vreti sa aplicati o pauza in cadrul unor actiuni jQuery inlantuite, puteti folosi metoda delay(). Aceasta preia un argument care indica numarul de milisecunde pentru pauza.
Exemplu. Face vizibil un element cu slideDown(), il afiseaza 2 secunde, il ascunde cu slideUp(), apoi ascunde si butonul (cu fadeOut()):
<style type="text/css"><!--
#dv1 { display:none; width:150px; height:90px; background:#deeffe; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // la click pe tag-ul cu id="btn", leaga mai multe actiuni la elementul cu id="dv1"
  // dupa 2 secunde ascunde DIV-ul si butonul
  $('#btn').click(function() {
    $('#dv1')
      .slideDown('slow')
      .animate({ 'width':'280px', 'fontSize':'18px' }, 1500)
      .delay(2000)
      .slideUp(600, function() {
        $('#btn').fadeOut('slow');
      });
  });
});
--></script>

<div id="dv1">Ai doua secunde ca sa citesti acest text :)<br />
Sa ai o viata buna</div>
<button id="btn">Click</button>
Demo:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<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>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
jQuery - legare mai multe efecte

Last accessed pages

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (46828)
  2. Lectii audio-video de limba engleza (9166)
  3. PHP PDO - exec INSERT UPDATE DELETE MySQL (468)
  4. Curs complet de limba engleza, incepatori (5623)
  5. Substantivul din limba engleza - The Noun (24820)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2915)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2056)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1561)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1210)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1179)