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!

• Discuţiile pe tema concursului Ebu.ro n-au întârziat. Desigur, discuţiile negative de genul „ăla se cunoştea cu ălalalt” sau „jurizarea nu a fost corectă”. Aşa e în tenis. Unii nu „ştie” să piardă.
• Sorin Drăghici a lansat jokopo.ro. E un site de jocuri, momentan în beta ce are nevoie de testeri. Deoarece (mai nou) site-urile se lansează cu concurs, se pune la bătaie un premiu pentru cel mai bun review constructiv. Cică io fac parte din staff şi nu pot să particip
• Următorul tutorial despre jQuery (efecte) este în lucru. În maxim trei zile o să fie online.
• În ultimele trei zile am băut mai mult decât am băut tot anul. Şi am băut chestii cu minim 40% alcool, nu m-am jucat
• Luni sau marţi îmi ajunge monstruleţul. Da, este cadoul meu (pentru mine) de Crăciun. Sper să nu îmi rupă placa de bază
• Am ascultat albumul Biţă. Sunt câteva piese mai răsărite, în rest…
• Am fani Aceştia s-au apucat să facă graffiti cu numele meu. Treaba cu „numele…. pe toate gardurile nu se aplică”. Poza este prin Argeş

Spicuind din categoria „when i’m good… i’m good, when i’m bad… i’m even better”, azi am aflat că am câştigat concursul ebu.ro Şi nu oricum, ci premiul 1. 

Well… Felicitări concurenţilor, mulţumiri juriului (care cred că a fost destul de obiectiv) şi…. aşteptăm următorul concurs

Amuzant este că cineva se bucură mai mult şi este mult mai entuziasmată decât mine

Fusei aseară la Blog Meet 6. La ultimele două (sau doar la ultimul) am lipsit motivat dar pe ăsta nu l-am mai ratat. So… Cum fu? Aglomeraţie, distracţie, fum, vin fiert, distracţie, aglomeraţie (încep să mă repet?), fum, puţin aer. Eh, ce mai? O seară super tare cu oameni super de gaşcă. O listă mai mult sau mai puţin completă găsiţi pe pagina Moşului. Tot acolo găsiţi şi poze, filme şi alte suveniruri.

Localul super mişto, îi mulţumim lui Bebe că ne-a lăsat să-i vandalizăm juma’ din crâşmă. Următorul Meet cred că va fi tot acolo, mai ales dacă ne promite că bagă încă două ferestre sau ventilatoare puternice

La întâlnire s-a încercat promovarea a două chestii: Alex Olaru a împărţit flyerele unui tip care făcea stand-up (nu ştiu exact care e treaba cu el) şi nişte cutiuţe de la Citybox.ro. Care pare-se s-a cam lansat. Şi pentru că s-a lansat cu surle şi trâmbiţe… Hai să-i facem un review scurt (fără nicio ordine firească)

• link-urile au o culoare foarte apropiată de fundal. Contrastul este cuvântul de bază dar care a fost ignorat cu brio;
• în header TREBUIE să fie link spre home. Mare, frumos, fără să te chinui sa-l nimereşti cu mausu şi, cel mai important, NO FLASH!
• dacă încerci o autentificare şi nu ai datele bune, nimeni nu îţi zice asta. Trebuie doar să ghiceşti că ceva nu e în regulă;
• un font un pic mai mic şi un line-height un pic mai mare ar fi făcut minuni la text. Dar dacă nu e… Nu e;
• link-urile nu au şi o stare de hover/activ. Meniul din stânga este cam sec din acest motiv;
• colţurile rotunjite arată un pic dubios. Având în vedere că nu este nevoie de transparenţă, se puteau face muuuult mai aspectuase;
• în sidebar-ul din dreapta, unele etichete pe care scrie „click” au cursor pointer, altele default… E cam aiurea;
• încărcăm jQuery 1.2.2 şi 1.2.6. Înţeleg, suntem fani, dar nici chiar în halul ăsta. Unul era suficient. Also, decât packed, mai bine minified & gzipped;
• mult (prea mult) javascript inline;
• link-uri seo friendly inexistente;
• o mulţime de erori de validare (html);
• pentru calendar se folosesc tabele. Înţeleg frica de tabele, dar a nu folosi tabele nici atunci când ai nevoie de ele e un pic ciudat;
• dacă vreau să dau un link spre un anumit articol cum trebuie procedat? Mie nu prea mi-a ieşit în niciun fel.

Deocamdată atât. Mi-a plăcut foarte mult ideea de promovare: o cutiuţă cu nisip înăuntru, un fel de carte de vizită, o lupă şi un pix. Pe lângă astea, o mini-mapă de prezentare scrisă destul de frumos.

Nu, nu este vorba despre un tutorial. După ce terminăm un crash-course în jQuery, facem o mică aplicaţie. Problema este că nu ştiu cam ce ar fi interesant pentru cursanţii mei (moah, cum sună ), aşadar m-am gândit să fac un poll. Am pus câteva variante, dar dacă alegerea ta nu se regăseşte în listă, adaugă într-un comentariu.

[poll id="5"]

Cam toate aplicaţiile conţin efecte, ajax, modificare DOM, etc, deci toate sunt destul de avansate pentru a uni toate cunoştinţele asimilate într-un singur exemplu.