jQuery är snyggt

Större delen av gårdagen ägnades åt en workshop (tack @stpe) kring frontendutveckling. Fokus var på YUI, men eftersom jag jobbat en del med det redan, men däremot inte hunnit dyka ner i jQuery på riktigt, valde jag det senare.

Min idé var att göra ett lajvflöde av Flickr-bilder och Twitter-postningar baserat på ett givet sökord eller tag.

JSONP

Både Flickr och Twitter har rika APIer i JSON-format som gör det lätt att åstadkomma det jag vill. Då dessa av naturliga skäl inte ligger på samma domän som min labb, kan jag inte göra ett vanligt XHR-anrop eftersom webbläsaren av säkerhetsskäl kastar ett same domain-policy-fel. Räddningen stavas JSONP, som helt enkelt wrappar hela JSON-svaret i ett metodanrop. Detta går vi inte in närmare på denna gång, utan konstaterar istället glatt att jQuery har stöd för detta och löser detta under ytan.

jQuerys effektköer

Planen är alltså att långsamt smyga in en bild, visa den ett tag, sedan dimma ner den och till sist ta bort den helt.

Sedan jQuery 1.4 finns det en toppenmetod för att hantera pauser i den allmänna effektkön, fx. Metoden heter delay() och låter mig åstadkomma önskat beteende på ett oerhört kompakt och tydligt vis.

$(img).fadeIn('slow').
       delay(1000).
       fadeTo('slow', 0.3).
       delay(2000).
       fadeOut('fast', function() { 
         $(this).remove(); 
       });

Det är ju nästan som att prata svenska (engelska)! Vi repeterar:

Koden

Vill du se hur det ser ut, kan du titta här eller ladda ner hela koden och labba vidare själv.

// Chrille