Cu jQuery se pot crea efecte de animatie la elementele din pagina prin modificarea proprietatilor CSS, folosind o metoda jQuery denumita animate.

Metoda animate

Metoda animate() permite crearea unui efect de animatie la oricare proprietate CSS cu valoare numerica (dimensiuni, distanta, marime font).
animate() se poate folosi cu aceasta sintaxa:
animate(
{
 proprietate1: valoare,
 proprietate2: valoare,
 proprietate3: valoare
}, durata, miscare, complet)
- Setul de proprietati CSS (dintre acolade) e singurul parametru necesar, restul sunt optionale. Puteti adauga oricate proprietati CSS, dar numele lor trebuie sa fie cel folosit in JavaScript (de exemplu, marginLeft, in loc de margin-left si backgroundColor in loc de background-color).
- durata - (optional) seteaza durata animatiei, care determina si viteza. Poate fi unul din sirurile "fast" si "slow", sau un numar care indica durata in milisecunde.
- miscare - (optional) specifica felul in care animatia progreseaza. Poate avea unul din aceste doua valori: "linear" sau "swing" (prestabilit).
- complet - (optional) reprezinta o functie ce va fi executata dupa ce animatia se termina.

jQuery va adauga noul stil CSS, dar in loc sa-l adauge instantaneu, il seteaza treptat, creand astfel un efect animat.
Proprietatile animate pot fi fixe (ex.: marginRight: '100px'), sau relative, folosind += sau -= pentru a adauga sau scade un anumit numar din valoarea curenta a proprietatii (ex.: marginRight: '+=80px').

Exemplu. La apasarea unui buton se anima cateva proprietati CSS la un <div>. Cand efectul e finalizat, modifica textul din buton:
<style type="text/css"><!--
#dv1 { width:50px; height:50px; background:#bebefe; font-size:11px; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
 // cand se apasa pe tag-ul cu id="btn", se anima cateva proprietati la "#dv1"
 // apoi modifica textul din #btn
 $('#btn').click(function() {
 $('#dv1').animate(
 {
 width: '150px',
 height: '80px',
 marginLeft: '+=80px',
 fontSize: '22px'
 }, 2000, 'linear', function() {
 $('#btn').text('Click again');
 });
 });
});
--></script>

<div id="dv1">un continut oarecare</div>
<button id="btn">Click</button>
Demo:
un continut oarecare

Valorile numerice ale proprietatilor pot fi inlocuite cu unul din sirurile: 'show', 'hide', si 'toggle' (ex.: width: 'toggle').
Exemplu: anima elementul cu id="dv", folosind valoarea "toggle" la width, height, opacity si fontSize; cu o durata de 2500 milisecunde. Cand animatia se termina, schimba textul din buton.
<style type="text/css"><!--
#dv1 { display:none; width:150px; height:80px; background:#bebefe; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
 // cand se apasa pe tag-ul cu id="btn", se anima cateva proprietati (cu valoare "toggle") la "#dv1"
 // apoi modifica textul din #btn
 $('#btn').click(function() {
 $('#dv1').animate({
 width: 'toggle',
 height: 'toggle',
 opacity: 'toggle',
 fontSize: 'toggle'
 }, 2500, function() {
 $('#btn').text('Click again');
 });
 });
});
--></script>

<div id="dv1">un continut oarecare</div>
<button id="btn">Click</button>
Demo:

Pe langa proprietatile CSS numerice, jQuery poate anima scrollTop si scrollLeft.
Exemplu. Animare derulare pagina in jos 400 pixels, prin setare derulare verticala +400 (scrollTop: '+=400'):
<script type="text/javascript"><!--
$(document).ready(function() {
 // cand se apasa pe tag-ul cu id="btn", deruleaza pagina in jos 400 pixeli
 $('#btn').click(function() {
 $('html, body').animate({
 scrollTop: '+=400'
 }, 1400, 'linear');
 });
});
--></script>

<button id="btn">Scroll Jos</button>
Demo

animate() - Optiuni avansate

Metoda animate() are si o versiune mai avansata cu optiuni suplimentare.
Sintaxa:
animate(
{
 proprietate1: valoare,
 proprietate2: valoare,
 proprietate3: valoare
},
{
 duration: valoare,
 easing: valoare,
 complet: function() { cod executat cand animatia se termina },
 step: function(now, fx) { cod in care se folosesc parametri "now" si "fx" },
 queue: valoare_boolean
})
- Setul de proprietati CSS (dintre acolade) e singurul parametru necesar, restul sunt optionale. Puteti adauga oricate proprietati CSS, doriti.
- duration - (optional) seteaza durata animatiei, care determina si viteza. Poate fi unul din sirurile "fast" si "slow", sau un numar care indica durata in milisecunde.
- easing - (optional) specifica felul in care animatia progreseaza. Poate avea unul din aceste doua valori: "linear" sau "swing" (prestabilit).
- complet - (optional) reprezinta o functie ce va fi executata dupa ce animatia se termina.
- step - (optional) o functie apelata la fiecare pas al animatiei. Aceasta functie este utila pentru a modifica animatia pe parcursul derularii ei. Are doua argumente: (now si fx):
        - now - valoarea numerica la fiecare pas a proprietatii.
        - fx - o instanta a obiectului jQuery.fx, care contine proprietatile: elem (pt. elementul animat), start si end (pt. prima si ultima valoare a proprietatii animate) si prop (pt. proprietatea animata).
              De exemplu, pentru a prelua ID-ul elementului curent animat:     var id_elm = fx.elm.id;
- queue - (optional) una din valorile: true sau false, determina plasarea sau nu a efectului in randul de asteptare.

"queue" este o lista cu animatii ce trebuie efectuate pentru un anumit element. De fiecare data cand se foloseste jQuery pentru crearea unui efect cu animate() la un element, acel efect e adaugat la randul de asteptare in "queue". jQuery va executa lista de efecte pt. acel element, unul cate unul pana ce se termina. Daca "queue" e setat "false", efectul nu va mai fi adaugat la rand in lista, ci executat imediat.


Exemplu. Animare inaltime si lungime la doua tag-uri <div>. Cand valoarea intreaga a lungimii primului DIV ajunge 160, porneste efectul pentru al doilea element.
<style type="text/css"><!--
#dv1 { width:200px; height:80px; background:#a7a8fe; }
#dv2 { width:100px; height:40px; background:#07fe08; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
 // cand se apasa pe tag-ul cu id="btn" anima inaltimea si lungimea a doua elemente
 $('#btn').click(function() {
 // start animare #dv1
 $('#dv1').animate(
 {
 width: '100px', height: '40px'
 },
 {
 duration: 2000,
 easing: 'linear',
 step: function(now, fx) {
 // preia valoarea curenta (intreaga) a lungimii lui #dv1 in timpul animatiei
 var wh = Math.floor(now);

 // daca lungimea lui #dv1 e 160, incepe animare #dv2
 if(wh==160) {
 $('#dv2').animate(
 {
 width: '200px', height: '80px'
 }, 2000);
 }
 }
 }
 );
 });
});
--></script>

<button id="btn">Click</button>
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
Demo:
Div 1
Div 2

Animare culori

Metoda animate() creaza efecte la proprietatile CSS cu valoare numerica, dar cele cu valoare non-numerica (color, backgroundColor) nu pot fi animate doar cu functiile de baza jQuery.
Pentru a crea efect de animatie la culori, se foloseste un plugin special jQuery, care poate fi descarcat de la pagina: jQuery plugin Animare culori.
Sau puteti copia codul de mai jos si sa-l salvati intr-un fisier ".js" pe server.

jQuery plugin Animare culori

(function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor', 'color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(fx.state==0){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);} fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3) return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];return colors[jQuery.trim(color).toLowerCase()];} function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body")) break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]};})(jQuery);

Dupa ce ati salvat acest cod pe server, includeti-l in documentul HTML (in sectiunea <head>...</head>), dupa codul de includere a librariei jQuery:
<head>
 <title>Page Title</title>
 <script type="text/javascript" src="jquery_library.js"></script>
 <script type="text/javascript" src="jq_color_plugin.js"></script>
</head>
Avand acest plugin, puteti anima culorile CSS la fel ca pe celelalte proprietati.

Exemplu. Cand utilizatorul apasa click pe un anumit <div>, anima lungimea, inaltimea, culoarea de fundal (backgroundColor) si culoarea textului.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Animare culori</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jq_color_animate.js"></script>
<style type="text/css"><!--
#dv1 { width:150px; height:60px; background:#a7a8fe; cursor:pointer; }
#dv1 em { display:none; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
 // ;a click pe elementul cu id="dv1", se anima width, height, backgroundColor, si color
 $('#dv1').click(function() {
 $(this).animate(
 {
 'width':'300px', 'height':'100px',
 'backgroundColor':'#7efe8f', 'color':'#0101fe'
 }, 2000, function() {
 $(this).find('em').fadeIn(900);
 });
 });
});
--></script>
</head>
<body>
Click:
<div id="dv1">Tutoriale jQuery si alte lectii pt. JavaScript:<br />
<em>marplo.net/javascript/</em></div>
</body>
</html>
Demo, dati click pe dreptunghi:
Click:
Tutoriale jQuery si alte lectii pt. JavaScript:
marplo.net/javascript/

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
jQuery - Animare proprietati CSS

Last accessed pages

  1. Baze de date SQL 2 (1441)
  2. Notiuni fundamentale despre bazele de date SQL (5710)
  3. Verbe care schimba baza: o:ue (581)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (32890)
  5. Articolul din limba engleza - The article (24577)

Popular pages this month

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