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 atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
jQuery - legare mai multe efecte

Last accessed pages

  1. Pronumele personal (9250)
  2. Gerunziu (1080)
  3. Participiu trecut (4223)
  4. Animatie elemente HTML cu CSS (3358)
  5. Faptele bune ale omului, din suflet sau stiinta (2885)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1362)
  2. Coduri pt culori (992)
  3. Curs HTML gratuit Tutoriale HTML5 (785)
  4. Cursuri limba engleza gratuite si lectii online (439)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (427)