Share
Een vleugje animatie kan een saaie interface opvrolijken. In deze zelfstudie leert u hoe u dit op de juiste manier doet met jQuery.
Animatie: een concept dat vaak opdringerige reacties van mensen oproept. Sommigen zweren bij zijn nut, terwijl anderen woeden bij overmatig gebruik. Desondanks geven animaties, wanneer ze juist worden gebruikt, vaak een gebruikersinterface op, waardoor ze veel pittiger en schoner aanvoelen. In deze zelfstudie beginnen we met een beetje basiskennis van jQuery, leren we hoe we onze eerste animatie kunnen maken en vervolgens kunnen we het effect opbouwen en uiteindelijk iets maken dat echt van toepassing is in de echte wereld..
Geïnteresseerd? Laten we meteen beginnen! Houd er rekening mee dat omdat dit is gericht op de beginner, ik misschien een beetje te veel op sommige onderdelen harp. Draag met me mee. Als je nieuwsgierig bent, bekijk dan het eerste deel van de demo voor het eenvoudige effect dat we vandaag zullen opbouwen.
jQuery is een JavaScript-bibliotheek die het voor u, een ontwikkelaar, gemakkelijker wil maken om betere, feature-rijke, interactieve websites en gebruikersinterfaces te bouwen met zo min mogelijk regels code.
Een typische coderegel ziet er zo uit:
$ (DOM-element) .something ();
Laten we eens naar elk onderdeel kijken:
Hier gaan we gewoon door met animatie en effecten gerelateerde functionaliteit.
jQuery biedt een heleboel ingebouwde methoden die u direct uit de verpakking kunt gebruiken. Deze omvatten methoden voor het weergeven / verbergen van elementen met een aantal variaties, waaronder het schuiven van het element en het vervagen van het element in en uit. Je kunt ook een aantal gebruiken toggle methoden die de zichtbaarheid van het betreffende element wijzigen.
Voordat we een kijkje nemen naar elk van deze methoden, is hier het algemene formaat voor het aanroepen van elke methode:
Accentsconagua
$ ("# element"). effect ([snelheid, callback]); Volgens het algemene jQuery-paradigma richten we ons in eerste instantie op het vereiste element met CSS-selectors. Vervolgens bellen we gewoon een van de ingebouwde methoden.
Hoewel de meeste methoden kunnen worden aangeroepen om geen parameters door te geven, wilt u de functionaliteit vaak aanpassen. Elke methode vereist minstens de snelheid en Bel terug parameters.
snelheid geeft de duur (in seconden) van de animatie aan. U kunt strings doorgeven, waaronder langzaam, normaal of snel, of u kunt nauwkeuriger zijn en de tijd in milliseconden instellen.
Bel terug is een functie die wordt uitgevoerd zodra de animaties zijn voltooid. Je kunt het gebruiken om alles te doen, een AJAX-oproep stil op de achtergrond te maken, een ander deel van de gebruikersinterface bij te werken, enzovoort. Je verbeelding is de limiet.
Hier is een lijst met de functies gebundeld met jQuery:
Als een extra functie heeft de hierboven genoemde toggle-methode een alternatieve implementatie waarbij een uitdrukking als een parameter is vereist om te beslissen of een element moet worden weergegeven of verborgen.
Als u bijvoorbeeld alleen lijstelementen wilt schakelen die een effect klasse, zou uw code eruit zien als:
$ ("li"). toggle ($ (this) .hasClass ("effect")); Simpel gezegd, de toggle-functies controleren de expressie die eraan wordt doorgegeven en als deze waar is, wordt deze omgeschakeld. Anders wordt het alleen gelaten. De uitdrukking die we hier hebben doorstaan, controleert of het element een specifieke klasse heeft.
Vaak passen de ingebouwde methoden niet helemaal bij je behoeften, in welk geval je zeker je eigen aangepaste effecten wilt bouwen. jQuery laat je dat ook doen. Heel gemakkelijk, eigenlijk.
Om een aangepast animatie-effect te maken, maakt u gebruik van de bezielen methode. Ik zal het je laten zien.
$ ("# somelement"). animeren (eigenschap: waarde, [snelheid, callback]); De bezielen methode is net als elke andere methode omdat het op dezelfde manier wordt aangeroepen. We verwerven een element en geven er vervolgens enkele parameters aan. De parameters is waar deze methode verschilt van de pre-built effecten.
De snelheid en Bel terug parameters hebben dezelfde functie als in de vorige methoden. De eigenschap object die een aantal sleutel- / waardeparen bevat, maakt deze methode uniek. Je geeft elke eigenschap die je wilt animeren door, samen met de uiteindelijke waarde. Stel dat u een element wilt animeren tot 90% van de huidige breedte, dan zou u iets moeten doen als:
$ ("# somelement"). animeren (width: "90%", 350, function () alert ("De animatie is voltooid.");); Het bovenstaande fragment animeert het element tot 90% van de breedte en waarschuwt de gebruiker om aan te geven dat het is voltooid.
Merk op dat je niet beperkt bent tot dimensies. U kunt een breed scala aan eigenschappen animeren, waaronder dekking, marges, opvullingen, randen, tekengrootten. De methode is ook behoorlijk flexibel als het gaat om eenheden. Pixels, ems, percentages werken allemaal. Dus iets zo ingewikkeld als het onderstaande zal werken. Het ziet er gewoon niet samenhangend uit.
$ ("# somelement"). animeren (width: "90%" fontSize: "14em", height: "183px", opacity: 0.8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm ",, 350, function () alert (" De animatie is voltooid. ");); Wanneer u een eigenschap definieert die uit meer dan één woord bestaat, maakt u een notitie om deze in kamelengeval te definiëren. Dit staat in schril contrast met de gebruikelijke CSS-syntaxis, dus maak hier een speciale opmerking. Haar borderTop, niet border-top.
Notitie: Met jQuery kunnen alleen objecten met numerieke waarden worden geanimeerd. Dit betekent dat alleen de kern wordt gebruikt, alle kleurgerelateerde eigenschappen zijn weg. Fret niettemin. Met wat hulp van de gebruikersinterface van jQuery zullen we in een mum van tijd kleuren animeren.
Als je het eenvoudige effect in de demo bekijkt, is het je misschien opgevallen dat het een beetje kapot is. Als u het element aan en uit beweegt, leidt dit herhaaldelijk tot een lange wachtrij die ertoe leidt dat de animatie zichzelf herhaalt.
De eenvoudigste manier om dit probleem te voorkomen, is door de hou op methode onmiddellijk voor het begin van de animatie. Hierdoor wordt de wachtrij effectief gewist en kan de animatie gewoon doorgaan. Dit zou bijvoorbeeld uw normale code zijn.
$ ("# someelement") .hover (function () $ (this) .anim (top: 20, 'fast');, function () $ (this). animate (top: 0 , 'snel');); Gebruik makend van hou op om animatievorming te voorkomen, zou uw nieuwe code er als volgt uitzien:
$ ("# someelement") .hover (function () $ (this) .stop (). anim (top: 20, 'fast');, function () $ (this) .stop () .animatie (top: 0, 'fast');); Vrij eenvoudig, niet? Maar deze methode heeft een klein probleem. Snelle interacties leiden niet tot buildups, maar tot onvolledige animaties. Als je dit probleem volledig wilt oplossen, moet je je wenden tot een plug-in zoals hoverFlow.
Als u iets meer realisme wilt toevoegen, heeft u meer controle nodig over de snelheid waarmee de animatie vordert. Hier komt versoepeling binnen. Verlichten regelt in wezen de versnelling en vertraging van de animatie in de loop van de tijd.
De standaard easing-methode is swing, die is ingebouwd in jQuery. Met de easing-plug-in van Robert Penner kunt u een aantal easing-effecten gebruiken. Bekijk het versmallingsgedeelte in de demo om elk versnellingseffect te bekijken.
Er is alleen een waarschuwing bij het gebruik van een aangepast easing-effect: u kunt het alleen gebruiken met aangepaste animatie-effecten, d.w.z. met de bezielen methode. Zodra je de easing-plug-in hebt toegevoegd, is het gebruik van een aangepaste easing-methode zo eenvoudig als doorgeven als een parameter zoals:
$ ("# somelement"). animeren (width: "90%" height: "183px",, 550, "easeInElastic"); Bekijk het versmallingsgedeelte van de demo om elke methode in actie te zien. Hoewel sommige versoepelingseffecten mogelijk niet geschikt zijn voor alle situaties, zullen uw animaties er zeker veel aantrekkelijker uitzien met het juiste gebruik van bepaalde versnellingsmethoden..
Upgraden naar jQuery UI vult ons een aantal hoognodige functies. U hebt in feite niet de hele bibliotheek nodig om gebruik te maken van de extra functies. U hebt alleen het kerneffectbestand nodig om de functionaliteit te verkrijgen. Niet de UI-kern, alleen het kernbestand met effecten dat weegt op een relatief minuscule 10 kilobytes.
De belangrijkste functies die de jQuery UI-effectenbibliotheek aan tafel biedt, zijn ondersteuning voor het animeren van kleuren, versoepeling en klasse-overgangen.
Als je het onthoudt, heb ik eerder gezegd dat je met de core jQuery-bibliotheek beperkt bent tot alleen animerende eigenschappen die getallen aannemen. Je bent van deze beperking af met jQ UI. U kunt nu eenvoudig de achtergrondkleur van een element animeren, de randkleur enzovoort. In plaats van een afzonderlijke functie voor deze uitgebreide functies te maken, breidt dit alleen de basis uit bezielen functie. Dit betekent dat als u de kernbibliotheek in uw bestand hebt opgenomen, u de gewone bibliotheek kunt gebruiken bezielen methode om al het vuile werk voor je te doen.
Als u bijvoorbeeld de randkleur van een element bij zweven wilt animeren, ziet uw code er zo uit:
$ (". block"). hover (function () $ (this) .anim (borderColor: "black", 1000);, function () $ (this) .animate (borderColor: "red ", 500);); Klasseovergangen zijn verantwoordelijk voor het animeren tussen klassen. Als u in de basisbibliotheek een klasse hebt verwijderd en daaraan heeft toegevoegd waardoor het uiterlijk van een element is gewijzigd, zou dit stelselmatig gebeuren. Als u de UI-bibliotheek aan boord hebt, kunt u extra parameters doorgeven om de snelheid van de animatie, de versnellingsmethode en een callback te regelen. Net als bij de vorige functie is deze functionaliteit bovenop de bestaande jQuery API gebouwd, wat het overgangsproces vergemakkelijkt.
De laatste functie die jQuery aan tafel biedt, zijn geïntegreerde versnellingsvergelijkingen. Eerder moest je een extra plug-in gebruiken om hier voor te zorgen maar nu komt het gebundeld zodat je je er geen zorgen meer over hoeft te maken.
Alle bovenstaande voorbeelden waren bedoeld als slechts demo's van de functionaliteit in kwestie. Zou het niet leuk zijn om daadwerkelijk iets van echt gebruik te bouwen? Dat is precies wat we vandaag gaan doen. Het is niet echt iets radicaal nieuws of baanbrekend, maar met deze demo kun je wat we vandaag geleerd hebben gebruiken in een echt wereldscenario.
Stel u dit voor: u wilt een afbeelding weergeven en wanneer een gebruikersmuis eroverheen gaat, geeft u 2 secties weer binnen De afbeelding. De ene toont een kop en de andere toont een kleine beschrijving van de afbeelding. Ik weet zeker dat je letterlijk een aantal plug-ins zult vinden die hetzelfde doen, maar vandaag gaan we het helemaal opnieuw bouwen. Ik beloof je dat het niet zo moeilijk is als het klinkt. In feite is het eigenlijk vrij eenvoudig en kan het heel snel worden gebouwd. Laten we beginnen.
Ten eerste hebben we een solide basis van markeringen nodig om op te bouwen.
Beginnen met animaties met jQuery - door Siddharth voor NetTuts Beginnen met animaties met jQuery
door Siddharth voor de lieve mensen van Net TutsEen eenvoudig gebruik van de animatie-effecten in de echte wereld, gevolgd door demo's voor de tekst van het artikel, waarin een fix wordt getoond voor de opbouw van animaties en de verschillende versmallingsmethoden die beschikbaar zijn.
Een eenvoudig echt wereldeffect
Wanneer de methode is gewijzigd, gaat deze naar nul hoogte met behulp van de standaardversie van jQuery en breidt vervolgens uit met de opgegeven easing-methode.
ThemeForest
De enige plek die u nodig heeft voor sitesjablonen en thema'sCodeCanyonDe beste bestemming voor scripts en codefragmenten
Voor dit effect moeten we eerst een structuur voor elk item bepalen. Elk item is ingepakt door een div met een klasse van item. Binnen de div zijn er 3 elementen: de afbeelding zelf en 2 div-elementen die de titel en beschrijving bevatten.
De andere delen zijn nogal alledaags en voor zichzelf sprekend. We beginnen met het opnemen van de jQuery-bibliotheek, de jQuery UI-bibliotheek en ons bestand met onze aangepaste JS-code. Houd er rekening mee dat ik alleen het kerngedeelte van de effecten van de gebruikersinterface van jQuery nodig had, dus ik heb alleen dat gedownload. Als u meer ingebouwde effecten wilt, heeft u een aangepaste versie nodig. Je kunt hier een aangepaste build downloaden.
Hier ziet u hoe onze pagina eruit ziet met deze fase voltooid.
.item positie: relatief; marge: 20 px 60 px 40 px 0; overloop verborgen; .item .title, .item .desc background: # 000; kleur: #fff; positie: absoluut; weergave: blok; breedte: 638 px; opaciteit: 0,4; .item. titel top: 0; lettergrootte: 16px; opvulling: 12px 10px 25px 0; text-align: right; .item .desc onder: 0; lettergrootte: 12px; opvulling: 5px 0 15px 10px;
Een paar dingen die u hier moet noteren. Elk itemelement heeft zijn positie eigenschap ingesteld op familielid zodat elementen erin gemakkelijk kunnen worden gepositioneerd. Ook zijn overloop eigenschap is ingesteld op verborgen zodat we de titel en beschrijving buiten kunnen verbergen wanneer ze niet nodig zijn.
De titel en beschrijving hebben hun positie eigenschap ingesteld op absoluut zodat ze precies in het itemelement kunnen worden gepositioneerd. De titel heeft een top waarde van 0 dus het is bovenaan en de beschrijving heeft zijn bodem waarde ingesteld op 0, dus rechts onderaan.
Verder is de CSS behoorlijk overzichtelijk en houdt zich voornamelijk bezig met typografie, een beetje positionering en styling. Niets is te radicaal.
Hier ziet u hoe onze pagina eruit ziet met deze fase voltooid.
$ (document) .ready (function () // Code voor andere delen van de demo $ (". item"). children ("div.title"). anim (top: -60, 300); $ (".item"). children ("div.desc"). animate (bottom: -40, 300); $ (". item"). hover (function () $ (this) .children (" div.title "). stop (). animeren (top: 0, 700," easeOutBounce "); $ (this) .children (" div.desc "). stop (). animeren (bottom: 0 , 700, "easeOutBounce");, function () $ (this) .children ("div.title"). Stop (). Animeren (top: -60, 500); $ (this) .children ("div.desc"). stop (). animeren (bottom: -40, 400);); $ (". title, .desc"). hover (function () $ (this) .stop () .animatie (backgroundColor: "# 444", 700, "easeOutSine");, function () $ (this) .stop (). animeren (backgroundColor: "# 000", 700); );); Het ziet er misschien een beetje imposant uit, maar dat is het niet. Laat me elk deel uitleggen.
De logica van dit effect is vrij eenvoudig. Omdat de elementen absoluut zijn geplaatst, plaatsen we de elementen in eerste instantie uit de viewport. Wanneer de afbeelding over de afbeelding zweeft, hoeven we deze alleen maar naar de oorspronkelijke positie terug te brengen, dat wil zeggen bovenaan en onderaan de afbeelding.
Eerst verplaatsen we de titel en beschrijving uit het zicht. We doen dit met JavaScript in plaats van met CSS voor een zeer specifieke reden. Zelfs als JS is uitgeschakeld, degradeert het behoorlijk elegant. De titel en beschrijving zijn nog steeds bedekt over de afbeelding en het lijkt precies op de hover-status. Als we in plaats daarvan CSS zouden gebruiken om de titel en beschrijving te verbergen en als JS is uitgeschakeld, zouden ze volledig verborgen en dus nutteloos zijn. Ik koos ervoor om JS te gebruiken voor het vuile werk in het belang van progressieve verbetering.
We binden de aangepaste code eerst aan de zweeffunctie van elk itemelement. Hiermee kan deze handler behoorlijk generiek en herbruikbaar worden gemaakt. Het toevoegen van deze functionaliteit aan anderen is net zo eenvoudig als het geven ervan item klasse. De eerste functie is voor de zweven evenement en de tweede is voor de unhover evenement.
In het kader van de functie, deze verwijst naar het element dat de gebeurtenis heeft geactiveerd. Wij gebruiken de bezielen methode om de juiste waarden te wijzigen. We gebruiken ook een beetje versnelling om het een beetje pakkender te maken. Bij muisuit of onoverwogen veranderen we de waarden gewoon terug naar hun standaardwaarden.
Als een extraatje, wanneer de containers voor de titel en beschrijving over de kop worden gehouden, kleuren ze langzaam, dankzij de jQuery UI.
En we zijn eigenlijk klaar. Heb niet zo veel tijd genomen, toch? Niet slecht voor een klein script dat nog kleiner is, gelet op hoeveel regels alleen werden toegewezen voor de accolades.
En daar heb je het. Hoe je animaties maakt met jQuery, samen met een echt voorbeeld van wat je hebt geleerd om goed te gebruiken. Hopelijk heb je deze tutorial interessant en nuttig gevonden. Voel je vrij om deze code elders in je projecten en hier te gebruiken als je in de problemen raakt.
Vragen? Leuke dingen om te zeggen? Kritiek? Klik op het gedeelte Opmerkingen en laat een opmerking achter. Happy codering!
Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].
Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.
