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:
- 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:
un continut oarecare
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.