Share
Ett streck av animering kan spruce upp ett tråkigt gränssnitt. I den här handledningen lär du dig hur du gör det på rätt sätt med jQuery.
Animation: ett koncept som ofta framkallar splittrande reaktioner från människor. Vissa svär av dess användbarhet, medan andra raser på sin överanvändning. Trots att animeringar, när de används rätt, brukar man gräva upp ett användargränssnitt och få det att känna sig mycket snällare och rent. I denna handledning kommer vi att börja med en liten jQuery-basics, sedan lära oss hur vi skapar vår första animation, och sedan vidare för att bygga effekten och slutligen skapa något som kommer att vara av verkligt verkligt bruk.
Intresserad? Låt oss börja omedelbart! Observera att eftersom det här är inriktat på nybörjaren, kanske jag har lite för mycket på vissa delar. Stå ut med mig. Om du är nyfiken, kolla in den första delen av demoen för den enkla effekten vi ska bygga idag.
jQuery är ett JavaScript-bibliotek som avser att göra det enklare för dig, en utvecklare, att konstruera bättre, funktionrika, interaktiva webbplatser och användargränssnitt med så få rader av kod som möjligt.
En typisk kodserie ser ut så här:
$ (DOM Element). Något ();
Låt oss ta en titt på varje del:
Här kommer vi bara hålla fast vid animering och effekter relaterad funktionalitet.
jQuery ger massor av inbyggda metoder som du kan använda direkt ur lådan. Dessa inkluderar metoder för att visa / dölja element med ett antal variationer, inklusive glidning av elementet och blekning av elementet in och ut. Du får också använda ett antal toggle metoder som ändrar synligheten hos elementet i fråga.
Innan vi tittar på var och en av dessa metoder, här är det allmänna formatet för att ringa varje metod:
Accentsconagua
$ ("# element"). effekt ([hastighet, återuppringning]); Efter det allmänna jQuery-paradigmet riktar vi inledningsvis det nödvändiga elementet med CSS-väljare. Nästa, vi ringer bara några av de inbyggda metoderna.
Medan de flesta metoderna kan kallas passerar inga parametrar, vill du ofta anpassa den till funktionaliteten. Varje metod tar minst fart och ring tillbaka parametrar.
fart Anger varaktigheten, i sekunder, av animationen. Du kan gå i strängar, inklusive långsam, normal eller snabb eller du kan vara mer exakt och ställa in tiden i millisekunder.
ring tillbaka är en funktion som körs när animationerna slutförts. Du kan använda den för att göra något, göra ett AJAX-samtal tyst i bakgrunden, uppdatera en annan del av användargränssnittet och så vidare. Din fantasi är gränsen.
Här är en lista över funktioner som medföljer jQuery:
Som en extra funktion har den ovan angivna växlingsmetoden ett alternativt genomförande där det tar ett uttryck som en parameter för att bestämma huruvida ett element ska visas eller döljas.
Om du till exempel vill byta endast listelement som har en effekt klassen kommer din kod att se ut:
$ ("li"). växla ($ (detta) .hasClass ("effekt")); För att uttrycka det enkelt, kontrollerar funktionerna det uttryck som passerat till det och om det är sant, växlas det. Annars är det kvar ensam. Det uttryck som vi har passerat här kontrollerar om elementet har en specifik klass.
Ofta passar de inbyggda metoderna inte rätt i dina behov, i så fall vill du definitivt bygga dina egna anpassade effekter. jQuery kan du också göra det. Ganska enkelt, faktiskt.
För att göra en anpassad animationseffekt använder du av animera metod. Låt mig visa dig.
$ ("# somelement"). animera (egenskap: värde, [hastighet, återuppringning]); De animera Metoden är precis som vilken som helst annan metod genom att den åberopas på samma sätt. Vi förvärvar ett element och skickar sedan några parametrar till den. Parametrarna är där denna metod skiljer sig från de förbyggda effekterna.
De fart och ring tillbaka parametrar tjänar samma funktion som i tidigare metoder. Objektegenskapen som innehåller ett antal nyckel / värdepar är vad det gör denna metod unik. Du passerar i varje egendom du vill ha animerad tillsammans med slutvärdet. Antag att du vill animera ett element till 90% av dess nuvarande bredd, du måste göra något som:
$ ("# somelement"). animera (bredd: "90%", 350, funktion () alert ("Animationen har slutförts.");); Ovanstående kod kommer att animera elementet till 90% av dess bredd och varna sedan användaren som anger att den är klar.
Observera att du inte är begränsad till dimensioner. Du kan animera ett brett utbud av egenskaper, inklusive opacitet, marginaler, vadderingar, gränser, typsnittstorlekar. Metoden är också ganska flexibel när det gäller enheter. Pixlar, ems, procentandelar allt arbete. Så något som nedslående som nedan kommer att fungera. Det kommer inte bara att se sammanhängande.
$ ("# somelement"). animera (bredd: "90%" fontSize: "14em", höjd: "183px", opacitet: 0,8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm ",, 350, funktion () alert (" Animationen har slutförts. ");); När du definierar en egenskap som består av mer än ett ord, gör en anteckning för att definiera den i kamelfall. Detta står i skarp kontrast till den vanliga CSS-syntaxen, så gör en speciell anteckning här. Dess BorderTop, inte border-top.
Notera: jQuery tillåter att egenskaper som tar numeriska värden endast animeras. Detta innebär att endast använda kärnan, alla färgrelaterade egenskaper är ute. Fret inte men. Med lite hjälp från jQuery UI kommer vi att animera färger på nolltid.
Om du tittar på den enkla effekten i demo kanske du har märkt att den är lite bruten. Att hänga på och av elementet upprepade gånger leder till en lång kö som inturn leder till att animationen upprepar sig själv.
Det enklaste sättet att undvika problemet är att använda sluta metod innan du börjar animationen. Detta rensar verkligen kön och animationen kan fortsätta som vanligt. Detta skulle till exempel vara din normala kod.
$ ("# someelement") .hover (funktion () $ (detta) .animate (top: 20, 'fast');, funktion () $ , 'snabb');); Använder sig av sluta För att undvika animation buildups skulle din nya kod se ut:
$ ("# someelement") .hover (funktion () $ (detta) .stop (). animera (topp: 20, "snabbt");, funktion () $ (detta) .animate (top: 0, 'fast');); Ganska enkelt, nej? Men den här metoden har en liten fråga. Snabba interaktioner leder inte till buildups utan istället för ofullständiga animeringar. Om du vill bli helt av med problemet, måste du vända dig till ett plugin som hoverFlow.
Om du vill lägga till lite mer realism, behöver du mer kontroll över den takt som animationen fortskrider. Det här är där lättnad kommer in. Avhöjning styr i huvudsak accelerationen och retardationen av animationen över tiden.
Standardlättnadsmetoden är swing som är inbyggd i jQuery. Robert Penners easing-plugin låter dig använda ett antal lätta effekter. Kolla in avsnittet Lättnad i demo för att titta på varje lättnadseffekt.
Det finns bara en försiktighet när det gäller att använda en anpassad lättnadseffekt: du kan bara använda den med anpassade animeringseffekter, dvs med animera metod. När du har det enkla pluginet med, är det enkelt att använda sig av en anpassad lättmetod som passerar den som en parameter som så:
$ ("# somelement"). animera (bredd: "90%" höjd: "183px",, 550, "easeInElastic"); Kolla in det enkla avsnittet i demo för att se varje metod i åtgärd. Medan vissa av de lättnadseffekterna kanske inte är lämpliga för alla situationer, kommer dina animationer säkert att vara mycket mer tilltalande med lämplig användning av vissa lättnadsmetoder.
Uppgradering till jQuery UI ger oss ett antal mycket nödvändiga funktioner. Du behöver i själva verket inte hela biblioteket för att utnyttja ytterligare funktioner. Du behöver bara kärnaffektsfilen för att få funktionaliteten. Inte UI-kärnan, bara effekterna kärnfilen som väger in i en relativt minimal 10 kilobytes.
De viktiga funktioner som jQuery UI-effekter biblioteket tar med sig till bordet är stöd för animerande färger, lättnader och klassövergångar.
Om du kommer ihåg, nämnde jag tidigare att med kärnan jQuery-biblioteket är du begränsad till bara animerande egenskaper som tar siffror. Du är borta från denna begränsning med jQ UI. Du kan nu enkelt animera ett elements bakgrundsfärg, dess kantfärg och så vidare. Också i stället för att skapa en separat funktion för dessa utökade funktioner, sträcker detta bara basen animera fungera. Det betyder att om du har kärnbiblioteket som ingår i din fil kan du använda det vanliga animera metod för att göra allt det smutsiga arbetet för dig.
Om du till exempel vill animera ett elements gränsvärde på svävaren, så ser din kod ut så här:
$ ("block"). sväva (funktion () $ (detta) .animate (borderColor: "black", 1000);, funktion () $ (this) .animate (borderColor: "röd ", 500);); Klassövergångar ansvarar för animering mellan klasser. Med basbiblioteket, om du tog bort och sedan lagt till en klass som ändrade utseendet på ett element, skulle det hända omedelbart. När du har UI-biblioteket ombord får du möjlighet att skicka in ytterligare parametrar för att ta hand om animationshastigheten, lättmetoden och en återuppringning. Precis som med föregående funktion är denna funktionalitet byggd ovanpå det befintliga jQuery API som underlättar övergångsprocessen.
Den sista funktionen som jQuery tar med sig till bordet är integrerade lättnadskomparationer. Tidigare var du tvungen att använda en extra plugin för att ta hand om det här men nu kommer det med bunt så du behöver inte oroa dig för det längre.
Alla ovanstående exempel var menade att vara bara demos av funktionaliteten i fråga. Skulle det inte vara trevligt att faktiskt bygga något av verklig världsanvändning? Det är just vad vi ska göra idag. Det är inte riktigt något radikalt nytt eller banbrytande, men den här demo låter dig lägga vad vi har lärt oss idag för att använda i en verklig scenarie.
Föreställ dig det här: Du vill visa en bild och när en användarmus överskrider den visar du 2 avsnitt inuti bilden. En visar en rubrik och den andra visar en liten beskrivning av bilden. Jag är säker på att du hittar bokstavligen en gazillion plugins som gör detsamma men idag kommer vi att bygga den från början. Jag lovar dig att det inte är så svårt som det låter. Det är faktiskt ganska enkelt och kan byggas mycket snabbt. Låt oss börja.
Först behöver vi en solid bas av markup för att bygga vidare.
Början Animationer med jQuery - av Siddharth för NetTuts Börjar animationer med jQuery
av Siddharth för de underbara folket på Net TutsEn enkel verklig användning av animationseffekterna följd av demor för artikelns text som visar en fix för animationsuppbyggnad och olika möjligheter till lättnad.
En enkel verklig världseffekt
När metoden ändras går den till nollhöjd med standard jQuery-lättnad och expanderar sedan med den angivna lättnadsmetoden.
ThemeForest
Det enda stället du behöver för mallar och temanCodeCanyonDen främsta destinationen för skript och kodrader
För denna effekt måste vi först bestämma en struktur för varje objekt. Varje objekt är inslaget av en div med en klass av Artikel. Inne i div finns tre element: själva bilden och 2 div-element som innehåller titeln och beskrivningen.
De andra delarna är ganska vardagliga och självförklarande. Vi börjar med att inkludera jQuery-biblioteket, jQuery UI-biblioteket och vår fil som innehåller vår anpassade JS-kod. Observera att jag bara behövde effekterna kärndelen av jQuery UI så att jag bara hämtade det. Om du vill ha fler effekter inbyggda behöver du en anpassad byggnad. Du kan ladda ner en anpassad byggnad här.
Så här ser vår sida ut med den här fasen.
.objekt position: relativ; marginal: 20px 60px 40px 0; överflöde: gömd; .item .title, .item .desc background: # 000; färg: #fff; position: absolut; display: block; bredd: 638px; opacitet: 0,4; .item .title top: 0; typsnittstorlek: 16px; vaddering: 12px 10px 25px 0; textjustera: höger; .item .desc botten: 0; fontstorlek: 12px; vaddering: 5px 0 15px 10px;
Några saker du behöver notera här. Varje objektelement har sin placera fastighet satt till släkting så att element inuti det kan placeras enkelt. Dess, dess svämma över fastigheten är inställd på dold så vi kan dölja titeln och beskrivningen utomhus när de inte behövs.
Titeln och beskrivningen har deras placera fastighet satt till absolut så att de kan placeras exakt inom objektet. Titeln har a topp värdet på 0 så det är högst upp och beskrivningen har sin botten värdet satt till 0 så att det är rätt längst ner.
Förutom det är CSS ganska pannplatta och berörs i huvudsak av typografi, lite positionering och styling. Ingenting för radikalt.
Så här ser vår sida ut med den här fasen.
$ (dokument) .ready (funktion () // Kod för andra delar av demo $ (". item"). barn ("div.title"). animera (top: -60, 300); $ (".item"). barn ("div.desc"). animera (botten: -40, 300), $ (". div.title "). stop (). animera (top: 0, 700," easeOutBounce "); $ (detta) .children (" div.desc "). 700, "easeOutBounce");, funktion () $ (detta) .barn ("div.title"). Stop (). Animera (topp: -60, 500); ("div.desc"). stop (). animera (botten: -40, 400);); $ (". title, .desc"). () .animate (backgroundColor: "# 444", 700, "easeOutSine");, funktion () $ (detta) .stop (). animera (backgroundColor: "# 000", 700); );); Det kan se lite imponerande men det är det inte. Låt mig förklara varje del.
Logiken för denna effekt är ganska enkel. Eftersom elementen är placerade absolut placerar vi inledningsvis elementen ur visningsporten. När bilden är svävad över behöver vi bara flytta den tillbaka till sin ursprungliga position, dvs längst upp och längst ner på bilden.
Först flyttar vi titeln och beskrivningen ur sikte. Vi gör det här med JavaScript istället för med CSS av mycket speciell anledning. Även om JS är inaktiverad, försämras det ganska graciöst. Titeln och beskrivningen överlappas fortfarande över bilden och det ser ut som svävarstaten. Om vi istället skulle använda CSS för att dölja titeln och beskrivningen och om JS är inaktiverad, skulle de vara helt dolda och därmed värdelösa. Jag valde att använda JS för det smutsiga arbetet i intresse för progressiv förbättring.
Vi kopplar initialt vår anpassade kod till svängfunktionen för varje objektelement. Detta gör det möjligt att göra denna hanterare ganska generisk och återanvändbar. Att lägga till den här funktionaliteten till andra är så enkelt som att ge den en Artikel klass. Den första funktionen är för sväva händelse och den andra är för unhover händelse.
Inom ramen för funktionen, detta avser det element som utlöste händelsen. Vi använder animera metod för att ändra lämpliga värden. Vi använder också lite lättare för att göra det lite mer catchy. På mouseout eller unhover ändrar vi bara värdena tillbaka till standardinställningarna.
Som en liten extra, när behållarna för titeln och beskrivningen svävar över, mumpar de långsamt färger, tack vare jQuery UI.
Och vi är faktiskt färdiga. Ta inte så mycket tid, gjorde det? Inte dåligt för ett litet manus, vilket är ännu mindre, med tanke på hur många linjer som tilldelades enbart för de lockiga axlarna.
Och där har du det. Hur man skapar animationer med jQuery tillsammans med ett verkligt världsexempel på att sätta vad du har lärt dig till god användning. Förhoppningsvis har du hittat denna handledning intressant och användbar. Känn dig fri att återanvända denna kod någon annanstans i dina projekt och chime här om du stöter på problem.
Frågor? Trevliga saker att säga? Kritik? Klicka på kommentarfältet och lämna mig en kommentar. Lycklig kodning!
Visste du att du kan tjäna upp till $ 600 för att skriva en PLUS-handledning och / eller screencast för oss? Vi letar efter djupgående och välskrivna handledning på HTML, CSS, PHP och JavaScript. Om du har förmåga, kontakta Jeffrey på [email protected].
Observera att den faktiska ersättningen kommer att vara beroende av kvaliteten på den slutliga handledningen och screencast.
