Curs Javascript

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 tag se foloseste pentru a crea o caseta de adaugare text?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Ce proprietate CSS se foloseste pentru a afisa textul cu majuscule-mici?
display font-variant font-style
h3 {
  font-variant: small-caps;
}
Ce instructiune afiseaza o fereastra cu un mesaj in ea?
for() Date() alert()
var msg = "Viziteaza CoursesWeb.net";
alert(msg);
Indicati codul PHP prin care se obtine IP-ul utilizatorului.
$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]
$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;
Cum se traduce cuvantul "actually"?
actual de fapt acum
He actually came on time.
- De fapt, el a venit la timp.
Cum se traduce expresia: "Hace buen tiempo"?
Face timp E vreme frumoasa Drum bun
Hoy hace buen tiempo.
- Astazi e vreme frumoasa.
jQuery - legare mai multe efecte

Last accessed pages

  1. getElementById si getElementsByTagName (574)
  2. Coduri pt culori (74569)
  3. Semnificatia Miracolelor (490)
  4. Capitole de teorie din Curs de Miracole (811)
  5. Zilele saptamanii (3476)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (436)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (335)
  3. Limba spaniola curs online incepatori si avansati (160)
  4. Gramatica limbii engleze - Prezentare Generala (159)
  5. Teste spaniola - Tests y ejercicios de Español - Gramática (156)