Ramverket för jQuery UI-effekter är modulariserat, precis som widgetramen, så att du kan välja vilka delar av paketet du vill använda och minska kodkraven. Du kan skapa en anpassad nedladdning för dig själv, vilket tar hänsyn till beroenden mellan modulerna.

Innan du tittar på hur du skapar en ny effekt bör du vara medveten om den andra funktionen som redan erbjuds av jQuery UI-effekterna, så att du kan använda den när du utvecklar dina egna effekter.

Underliggande de individuella jQuery UI-effektmodulerna är en kärna av allmänt använd funktionalitet. Dessa förmågor implementeras här så att du inte behöver återuppfinna dem och kan tillämpa dem omedelbart på dina egna effekter. Tillsammans med färganimering hittar du animering från attribut från en klass till en annan, och flera lågnivåfunktioner som kan vara användbara vid utveckling av nya effekter.

Färganimering

Effektkärnmodulen lägger till anpassat animationsstöd för stilattribut som innehåller färgvärden: förgrunds- och bakgrundsfärger och gränser och konturer. jQuery själv tillåter endast animering av attribut som är enkla numeriska värden, med en valfri enhetens designator som px, em eller%. Det vet inte hur man tolkar mer komplexa värden, som färger eller hur man ökar dessa värden korrekt för att uppnå önskad övergång, till exempel från blått till rött via en mellanfärgad lila färg.

Färgvärdena består av tre komponenter: de röda, gröna och blåa bidragen, var och en med ett värde mellan 0 och 255. De kan anges i HTML och CSS på ett antal olika sätt, som anges här:

  • Hexadecimala siffror- # DDFFE8
  • Minimala hexadecimala siffror - # CFC
  • Decimala RGB-värden-rgb (221, 255, 232)
  • Decimala RGB-procentandelar-rgb (87%, 100%, 91%)
  • Decimala RGB och transparensvärden-rgba (221, 255, 232, 127)
  • En namngiven färgkalk

De röda, gröna och blåa komponenterna måste separeras och individuellt animeras från sina initialvärden till sina sista, innan de kombineras i den nya kompositfärgen för mellanstegen. jQuery UI lägger till animationssteg för varje drabbat attribut för att korrekt avkoda nuvarande och önskade färger och ändra värdet när animationen körs. Förutom de färgformat som beskrivs i föregående lista kan det animerade samtalet också acceptera en uppsättning av tre numeriska värden (var och en mellan 0 och 255) för att ange färgen. När dessa funktioner har definierats kan du animera färger på samma sätt som du skulle göra för andra numeriska attribut:

$('#myDiv').animate({backgroundColor: '#DDFFE8'});

jQuery UI innehåller en utökad lista med namngivna färger som den förstår, från de grundläggande röda och gröna till den mer esoteriska darkorchid och darksalmon. Det finns även en genomskinlig färg.

Klass animation

Standard jQuery kan du lägga till, ta bort eller växla klasser på valda element. jQuery-användargränssnittet går bättre genom att låta dig animera övergången mellan före och efter stater. Det gör detta genom att extrahera alla attributvärden som kan animeras (numeriska värden och färger) från start- och slutkonfigurationerna och sedan anropa ett standardanpassat samtal med alla dessa som egenskaper som ska ändras. Den här nya animationen utlöses genom att ange en varaktighet när man ringer till addClass, removeClass eller toggleClass-funktionerna:

$('#myDiv').addClass('highlight', 1000);

jQuery UI lägger också till en ny funktion, switchClass, som tar bort en klass och lägger till en klass, med valfri övergång mellan de två tillstånden (när en varaktighet ges):

$('#myDiv').switchClass('oldClass', 'newClass', 1000);

Vanliga effekter funktioner

För att bättre stödja de olika effekterna av jQuery UI, ger effektkärnmodulen flera funktioner som är användbara för dessa effekter, och kanske för egen. För att illustrera hur flera av dessa funktioner används, visar följande listning de relevanta delarna av bildseffekten.

$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};

Du kan använda setMode-funktionen för att konvertera ett växlingsläge till lämpligt visa eller dölja värde baserat på elementets nuvarande synlighet. Om det angivna läget visas eller döljs, behåller det det värdet, och i det här fallet visas standardvärden om de inte ges alls.

Innan animationen startas för effekten, kanske du vill använda spara funktionen för att komma ihåg de ursprungliga värdena för flera attribut (från namnen i rekvisita) på elementet, så att de kan återställas när de är färdiga. Värdena lagras mot elementet med jQuery-datafunktionen.

För att underlätta rörelsen av ett element för en effekt kan du pakka en behållare kring det här elementet med funktionen createWrapper för att använda som referenspunkt för rörelsen. Positionsinformation kopieras från det angivna elementet till omslaget så att det visas direkt ovanpå det ursprungliga elementet. Elementet placeras sedan i den nya behållaren längst upp till vänster så att den totala effekten är oanmärkbar av användaren. Funktionen returnerar en hänvisning till omslaget.

Eventuella ändringar av vänster / höger / övre / nedre inställningen för det ursprungliga elementet kommer nu att vara i förhållande till dess ursprungliga läge utan att påverka de omgivande elementen. Har du sparat vissa attributvärden tidigare, använder du återställningsfunktionen när animationen är klar för att återställa dem till sina ursprungliga inställningar. Samtidigt bör du ta bort eventuellt omslag som du skapade tidigare med funktionen remove-Wrapper. Denna funktion returnerar en hänvisning till omslaget om den togs bort, eller till själva elementet om det inte fanns något omslag.

Det finns några andra funktioner som tillhandahålls av jQuery UI Effects Core-modulen som kan vara användbar:

getBaseline (origin, original) Denna funktion normaliserar en ursprungsspecifikation (en tvåelements array av vertikala och horisontella positioner) i fraktionerade värden (0,0 till 1,0) med en originalstorlek (ett objekt med egenskaper i höjd och bredd). Den omvandlar namngivna positioner (topp, vänster, mitten och så vidare) till värdena 0,0, 0,5 eller 1,0 och omvandlar numeriska värden till andelen av den relevanta dimensionen. Det returnerade objektet har attribut x och y för att hålla fraktionsvärdena i motsvarande riktningar. Till exempel,

var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}

setTransition (element, lista, faktor, värde) Använd denna funktion om du vill tillämpa en skalningsfaktor på flera attributvärden samtidigt. För varje attributnamn i listan hämta dess nuvarande värde för elementet och uppdatera det genom att multiplicera det med faktor. Ställ in resultatet i värdeobjektet under attributets namn och returnera det objektet från funktionen. Till exempel, för att minska vissa värden med hälften kan du göra det här:

el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);

cssUnit (key) För att skilja ett namnet CSS-attribut (nyckel) till dess antal och enheter (em, pt, px eller%), returneras som en grupp med två värden, använd den här funktionen. Om enheterna inte är en av dessa kända typer returneras en tom array. Till exempel,

var value = el.cssUnit('width'); // e.g. value = [200, 'px']

Funktionerna som presenteras i detta avsnitt används av många av effekterna av jQuery UI. Dessa effekter ses över i nästa avsnitt.

Befintliga effekter

Många effekter tillhandahålls av jQuery UI. De flesta av dessa är utformade för att förbättra hur ett element visas eller försvinner (till exempel blind och drop), medan andra tjänar till att uppmärksamma ett element (till exempel markera och skaka):

  • blind: Element expanderar eller kontrakterar vertikalt (standard) eller horisontellt från dess övre eller vänstra sida
  • studs: Elementet faller in i eller ur visningen och studsar några gånger
  • klipp: Element expanderar eller kontrakterar vertikalt (standard) eller horisontellt från mittlinjen
  • släpp: Elementet glider in i eller ur visningen från vänster (standard) eller överst, och bleknar till eller från fullständig opacitet
  • explodera: Elementet bryts upp i sektioner och flyger isär, eller sätter ihop sig från flygande delar
  • blekna: Elementet bleknar till eller från fullständig opacitet
  • fold: Element expanderar eller kontrakterar först i en riktning och i den andra (horisontellt sedan vertikalt som standard)
  • markera: Element ändrar bakgrundsfärgen kortfattat
  • puff: Element minskar eller ökar i storlek och bleknar till eller från fullständig opacitet
  • pulsat: Elementet bleknar och i flera gånger
  • skala: Element expanderar eller kontrakterar från eller till dess mittpunkt med ett procenttal
  • skaka: Element flyttar från sida till sida flera gånger
  • storlek: Element minskar eller ökar i storlek till givna dimensioner
  • glida: Elementen glider horisontellt (standard) eller vertikalt från sin egen kant
  • överföring: Element flyttas och ändras för att matcha ett målelement

Dessa effekter kan användas i samband med de förbättrade funktionerna för jQuery UI, Hide and Switch-funktionen genom att ange namnet på den önskade effekten som den första parametern. Du kan också tillhandahålla ytterligare alternativ som ändrar beteendet för effekten, animationens varaktighet och en återuppringningsfunktion som utlöses vid slutförandet.

$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);

Sammanfattning

Innehållet i jQuery-gränssnittsmodulerna är några grundläggande verktygsfunktioner, lågnivåbeteenden (till exempel dra och släpp), komponenter på hög nivå eller widgets (till exempel flikar och datumpicker) och många visuella effekter. Du kan använda dessa effekter för att förbättra presentationen av element på din webbsida, eller för att ta med ett visst element till användarens uppmärksamhet. För att hjälpa dig att skapa egna effekter finns det en kärna av de vanliga funktionerna som finns tillgängliga.

Har du använt jQuery UI-effekterna? Hur jämför det med inbyggda CSS tweens? Låt oss veta dina tankar i kommentarerna.