Tutorial jQuery – V – Efecte

După ce am văzut cum funcționează selectorii și event-urile în jQuery, putem trece la pasul următor: efectele. Mulți folosesc o librărie JS (jQuery, Prototype sau orice altceva) aproape exclusiv pentru efecte.

jQuery include câteva efecte simple dar majoritatea sunt doar variații ale unei singure funcții: animate(). Toate efectele au un parametru pentru o funcție callback. Efectele built-in sunt:

• show() / hide() -  folosite fără niciun parametru doar schimbă display:none în display:block sau display:inline (în funcție de tipul elementului) și invers. Cu un parametru numeric (ex: $('div').show(500) ) va genera un efect de redimensionare și transparență de durată 500 ms;
• slideUp() / slideDown() – ascunde/arată un element printr-un efect de „alunecare”. Acceptă ca parametrii: durată, callback și easing (nu știu cum aș putea traduce asta, dar voi explica mai jos ce face);
• toggle() / slideToggle() – dacă un element este vizibil îl ascunde și viceversa. La fel ca la exemplul anterior, poți specifica durata și o funcție callback;
• fadeIn() / fadeOut() – schimbă opacitatea unui element și îi setează display:block / display:none. Parametrii: durată și callback;
• fadeTo(durata, opacitate, callback) – schimbă opacitatea unui element fără a-i afecta vizibilitatea. Spre deosebire de fadeOut(), fadeTo(300, 0) doar setează opacitatea la 0, fără a ascunde elementul. Este asemănător cu  display:none VS. visibility:hidden.

Explicații

• funcția callback rulează după ce efectul este terminat și arată cam așa:

  $('div').slideUp(500, function(){ alert('Ascuns')})

  desigur, se poate folosi și combinația:

  var callback = function() {
   alert('Ascuns');
  };
  $('div').slideUp(500, callback)

• Easing – reprezintă un calcul matematic ce adaugă un… efect la efect. În cazul în care animația vrei să se desfășoare liniar (cu aceeași viteză de la început până la sfârșit), nu ai nevoie de așa ceva. În schimb, dacă vrei ca un slideUp să înceapă brusc și să se termine încet, poate ar trebui să folosești plugin-ul ce adaugă ceva opțiuni în plus (pe lângă liniar și swing, disponibile implicit). Acesta, pe baza unor formule matematice (scrise într-o limbă complet necunoscută mie) îți adaugă o multitudine de opțiuni. Pe pagina sus amintită vei găsi o listă cu toate opțiunile.

Efecte custom

Astea sunt cele mai drăguțe deoarece singura limită ține de imaginația fiecăruia. Ce se poate anima? Păi… Cam orice proprietate CSS în afară de z-index (IE face figuri). Atenție însă, dacă vrei să schimbi poziția unui element, nu uita să-l poziționezi absolut mai întâi! Dimensiunile sunt specificate în pixeli dar, dacă le pui în ghilimele, poți specifica unitatea de măsură preferată.

$('p:eq(0)').css({position:'absolute'}).animate({
	bottom:0,
	fontSize:'2em',
	opacity: 0.5,
	left:	'50%',
	width:'50%'
}, 1500, 'swing',  function(){
	alert('Animat!');
});

Poți încerca diverse efecte folosind consola în pagina demo:

Mai multe efecte!

Dacă nu îți place/nu ai timp/chef să experimentezi (sau orice alt motiv) poți încerca jQuery UI. Este o librărie asemănătoare scriptaculous ce adaugă câteva funcționalități mai deosebite pentru jQuery: drag&drop, mai multe efecte, slidere, datepicker, etc. Aici ai demo cu efectele jQuery UI.

Ce urmează?

Momentan o pauză de o săptămână-două, după care voi reveni cu un exemplu practic cu ce am învățat până acum și un  tutorial despre cum putem modifica DOM-ul cu jQuery. Nu uita să alegi ce tutorial vrei să fie exemplul final!