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
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
jQuery - legare mai multe efecte

Last accessed pages

  1. Gramatica limbii engleze - Prezentare Generala (139125)
  2. Invataturile Alesului si Evanghelia Eseniana a Pacii (1084)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (118294)
  4. Evanghelia Eseniana a Pacii - 1 (691)
  5. Curs HTML gratuit Tutoriale HTML5 (77668)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1343)
  2. Curs HTML gratuit Tutoriale HTML5 (936)
  3. Curs si Tutoriale JavaScript (862)
  4. Curs si Tutoriale Ajax (836)
  5. Curs CSS Online Tutoriale CSS3 (801)