Rammen for jQuery UI-effekter er modularisert, akkurat som widgetrammen, slik at du kan velge hvilke deler av pakken du vil bruke, og redusere kodenes krav. Du kan lag en tilpasset nedlasting for deg selv, som tar hensyn til avhengigheter mellom modulene.
Før du ser på hvordan du oppretter en ny effekt, bør du være klar over den andre funksjonaliteten som allerede er presentert av jQuery UI-effekter rammeverket, slik at du kan bruke den når du utvikler dine egne effekter.
Underliggende de enkelte jQuery UI-effektmodulene er en kjerne av vanlig funksjonalitet. Disse evnene er implementert her, slik at du ikke trenger å oppfinne dem igjen og kan bruke dem umiddelbart til dine egne effekter. Sammen med fargeanimasjon finner du animasjon fra attributter fra en klasse til en annen, og flere lavnivåfunksjoner som kan være nyttige for å utvikle nye effekter.
Effektkjernemodulen legger til tilpasset animasjonsstøtte for stilattributter som inneholder fargeverdier: forgrunns- og bakgrunnsfarger, og grense- og konturfarger. jQuery selv tillater bare animering av attributter som er enkle numeriske verdier, med en valgfri enhetens designator som px, em eller%. Det vet ikke hvordan man tolker mer komplekse verdier, som farger, eller hvordan man øker disse verdiene riktig for å oppnå ønsket overgang, for eksempel fra blå til rød via en mellomliggende lilla farge.
Fargeverdier består av tre komponenter: de røde, grønne og blå bidragene, hver med en verdi mellom 0 og 255. De kan angis i HTML og CSS på en rekke forskjellige måter, som oppført her:
De røde, grønne og blå komponentene må skilles ut og individuelt animeres fra de opprinnelige verdiene til de endelige, før de kombineres i den nye komposittfargen for mellomtrinnene. jQuery brukergrensesnitt legger til animasjonstrinn for hvert berørt attributt for å dekode de gjeldende og ønskede fargene riktig, og for å endre verdien når animasjonen kjører. I tillegg til fargeformatene som er beskrevet i forrige liste, kan animeanropet også akseptere en rekke tre numeriske verdier (hver mellom 0 og 255) for å angi fargen. Når disse funksjonene er definert, kan du animere farger på samme måte som du ville gjøre for andre numeriske attributter:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery brukergrensesnitt inneholder en utvidet liste over navngitte farger som den forstår, fra grunnleggende rød og grønn til mer esoterisk darkorchid og darksalmon. Det er enda en gjennomsiktig farge.
Standard jQuery lar deg legge til, fjerne eller bytte klasser på utvalgte elementer. jQuery UI går en bedre ved å tillate deg å animere overgangen mellom før og etter stater. Det gjør dette ved å trekke ut alle attributtverdiene som kan animeres (numeriske verdier og farger) fra start- og sluttkonfigurasjonene, og deretter påkalle en standard animeanrop med alle disse som egenskaper som skal endres. Denne nye animasjonen utløses ved å spesifisere en varighet når du ringer til addClass, removeClass eller toggleClass-funksjonene:
$('#myDiv').addClass('highlight', 1000);jQuery UI legger også til en ny funksjon, switchClass, som fjerner en klasse og legger til en klasse, med valgfri overgang mellom de to tilstandene (når en varighet er oppgitt):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);For bedre å støtte de ulike effektene av jQuery UI, gir effektkjernemodulen flere funksjoner som er nyttige for disse effektene, og kanskje til din egen. For å illustrere hvordan flere av disse funksjonene blir brukt, viser følgende liste de relevante delene av lysbildeffekten.
$.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 bruke setMode-funksjonen til å konvertere en modus for å bytte til riktig vis eller skjule verdi basert på elementets nåværende synlighet. Hvis den angitte modusen viser eller skjuler, beholder den verdien, og i dette tilfellet vil standardene vise om det ikke er gitt i det hele tatt.
Før du starter animasjonen for effekten, vil du kanskje bruke lagringsfunksjonen til å huske de opprinnelige verdiene til flere attributter (fra navnene i rekvisitter) på elementet, slik at de kan gjenopprettes når de er ferdig. Verdiene lagres mot elementet ved hjelp av jQuery data-funksjonen.
For å lette bevegelsen av et element for en effekt kan du pakke en beholder rundt det elementet med createWrapper-funksjonen som referansepunkt for bevegelsen. Posisjonsinformasjon kopieres fra det angitte elementet til omslaget slik at det vises direkte oppå det opprinnelige elementet. Elementet plasseres deretter i den nye beholderen øverst til venstre, slik at den totale effekten ikke er merkbar av brukeren. Funksjonen returnerer en referanse til wrappen.
Eventuelle endringer i venstre / høyre / øverste / nedre innstillinger for det opprinnelige elementet vil nå være i forhold til sin opprinnelige posisjon, uten å påvirke de omgivende elementene. Etter å ha lagret visse attributtverdier tidligere, bruker du gjenopprettingsfunksjonen når animasjonen er fullført for å returnere dem til de opprinnelige innstillingene. Samtidig bør du fjerne hvilken som helst pakke som du opprettet tidligere med fjern-Wrapper-funksjonen. Denne funksjonen returnerer en referanse til omslaget hvis den ble fjernet, eller til selve elementet hvis det ikke var noen innpakning.
Det er noen andre funksjoner som leveres av jQuery UI Effects Core-modulen som kan være av nytte:
getBaseline (opprinnelse, original) Denne funksjonen normaliserer en opprinnelsesspesifikasjon (et toelements utvalg av vertikale og horisontale posisjoner) i brøkdelte verdier (0,0 til 1,0) gitt en originalstørrelse (et objekt med høyde og breddeattributter). Den konverterer navngitte posisjoner (topp, venstre, senter og så videre) til verdiene 0,0, 0,5 eller 1,0, og konverterer numeriske verdier til andelen av den aktuelle dimensjonen. Det returnerte objektet har attributter x og y for å holde brøkverdiene i de tilsvarende retningene. For eksempel,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (element, liste, faktor, verdi) Bruk denne funksjonen til å bruke en skaleringsfaktor til flere attributtverdier samtidig. For hvert attributtnavn i listen, hent den nåværende verdien for elementet, og oppdatere det ved å multiplisere det med faktor. Sett resultatet i verdien objektet under navnet på attributten, og returner det objektet fra funksjonen. For eksempel, for å redusere visse verdier med halvparten, kan du gjøre dette:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (nøkkel) For å skille et navngitt CSS-attributt (nøkkel) inn i mengden og enhetene (em, pt, px eller%), returnert som en gruppe med to verdier, bruk denne funksjonen. Hvis enhetene ikke er en av disse kjente typene, returneres en tom rekkefølge. For eksempel,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Funksjonene som presenteres i denne delen, brukes av mange av effektene fra jQuery UI. Disse effektene blir vurdert i neste avsnitt.
Tallrike effekter er gitt av jQuery UI. De fleste av disse er utformet for å forbedre hvordan et element vises eller forsvinner (for eksempel blind og slipp), mens andre tjener til å gi oppmerksomheten til et element (for eksempel høydepunkt og riste):
Disse effektene kan brukes sammen med de forbedrede jQuery UI-visningene, gjem- og vekselfunksjonene ved å gi navnet på ønsket effekt som den første parameteren. Du kan også levere tilleggsalternativer som endrer virkemåtenes virkemåte, animasjonens varighet og en tilbakeringingsfunksjon som utløses ved ferdigstillelse.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Inkludert i jQuery UI-modulene er noen grunnleggende bruksfunksjoner, lavt nivåadferd (som dra og slipp), komponenter på høyt nivå eller widgets (for eksempel faner og Datepicker), og mange visuelle effekter. Du kan bruke disse effektene til å forbedre presentasjonen av elementer på nettsiden din, eller for å bringe et bestemt element til brukerens oppmerksomhet. For å hjelpe deg med å skape dine egne effekter, er det en kjerne av de brukte funksjonene som er tilgjengelige.
Har du brukt jQuery UI effekter rammeverket? Hvordan sammenligner det med innfødte CSS tweens? Gi oss beskjed om dine tanker i kommentarene.