element naar rechts totdat het de linker 250px-eigenschap bereikt:

Standaard alles HTML-elementen hebben een statische positie en kunnen niet worden verplaatst.
Om de positie te manipuleren, moet u eerst de positie van de CSS-eigenschap van het element instellen op relatief, vast of absoluut!

JQuery animeren () - Meerdere eigenschappen manipuleren

Houd er rekening mee dat meerdere eigenschappen tegelijkertijd kunnen worden geanimeerd:

Is het mogelijk om alle CSS-eigenschappen te manipuleren met de animate () methode?

Ja bijna! Er is echter één belangrijk ding om te onthouden: alle eigendomsnamen moeten camel cased zijn wanneer: delen met de animate () -methode: u moet paddingLeft schrijven in plaats van padding-left, marginRight in plaats van margin-right, enzovoort.

Kleuranimatie is ook niet opgenomen in de hoofdbibliotheek van JQuery.
Als je kleur tot leven wilt brengen, moet je de plug-in Color Animations downloaden van jQuery.com.

JQuery animeren () - Relatieve waarden gebruiken

Daarnaast kunt u relatieve waarden definiëren (waarde dan relatief ten opzichte van de huidige waarde van het item). Dit doe je door + = of - = voor de waarde te zetten:

JQuery animeren () - met vooraf gedefinieerde waarden

U kunt zelfs een waarde voor de animatie-eigenschap opgeven, zoals "show", "hide" of "toggle":

JQuery animate () - Gebruikt wachtrijfunctionaliteit

JQuery wordt standaard geleverd met animatiewachtrijfunctionaliteit.

Dit betekent dat als u meerdere geanimeerde ()-aanroepen na elkaar schrijft, JQuery een "interne" wachtrij maakt met die methodeaanroepen. Vervolgens lanceert hij de anime-oproepen een voor een.

Dus als je verschillende animaties achter elkaar wilt uitvoeren, maken we gebruik van de wachtrijfunctionaliteit:

voorbeeld 1

$ ("knop"). klik op (functie () (
var div = $ ("div");
div.animate ((hoogte: "300px", dekking: "0.4"), "langzaam");
div.animate ((breedte: "300px", dekking: "0.8"), "langzaam");
div.animate ((hoogte: "100px", dekking: "0.4"), "langzaam");
div.animate ((breedte: "100px", dekking: "0.8"), "langzaam");

Een klein beetje animatie kan elke saaie interface opfleuren. In het artikel van vandaag leer je hoe je het correct gebruikt met jQuery gebruiken.

Invoering

Animatie is een concept dat meestal gemengde reacties krijgt van mensen. Sommigen beschouwen het als nuttig, terwijl anderen het overmatig gebruik ervan veroordelen. Hoe dan ook, als het correct wordt gebruikt, siert animatie vaak de gebruikersinterface en maakt het deze schoner en levendiger. In het artikel van vandaag zullen we snel kijken naar jQuery-basisprincipes, dan leren we hoe we onze eerste animatie kunnen maken, leren we hoe we verschillende effecten kunnen bouwen en maken we vervolgens een animatie die in echte projecten kan worden gebruikt.

Stap 1. Basisprincipes van jQuery

jQuery is JavaScript-bibliotheek, dat tot doel heeft de ontwikkelaar te helpen bij het maken van rijke, interactieve websites en gebruikersinterfaces met zo min mogelijk code.

Een typische regel code ziet er als volgt uit:

$ (DOM-element) .iets ();

Laten we elk onderdeel opsplitsen:

• $ - Afkorting voor jQuery-object. Als u meerdere frameworks tegelijkertijd op dezelfde pagina gebruikt, gebruikt u in plaats van het $-teken de jQuery-afkorting: jQuery (DOM Element) .something ();
• (DOM-element)- Het element waarmee je iets gaat doen. Dit is een van belangrijkste kenmerken: jQuery. U kunt CSS-kiezers gebruiken om gewenste item... Alle selectors die in een CSS-bestand werken, kunnen hier worden gebruikt. ID's, klassen, pseudo-klassen, wat dan ook.
• .iets ()- Wat u met het resulterende item wilt doen. Dit kan van alles zijn, van het verbergen van een element tot het doen van een AJAX-verzoek aan een gebeurtenishandler.

Vandaag zullen we alleen kijken naar animatie en de effecten die verband houden met de functionaliteit ervan.

Stap 2. De ingebouwde effecten gebruiken

jQuery biedt een groot aantal ingebouwde methoden die u direct uit de doos kunt gebruiken. Dit zijn methoden voor het tonen/verbergen van elementen, met verschillende variaties, waaronder het verschuiven van een element en het wijzigen van de dekking. U kunt ook een aantal methoden gebruiken schakelaar die de zichtbaarheid van het element wijzigen.

Voordat we naar elk van deze methoden kijken, moet u eerst kijken naar het basisformaat voor het aanroepen van elke methode:

$ ("# element"). effect ();

Hierboven staat het basisparadigma van jQuery, eerst krijgen we het element dat we nodig hebben met behulp van CSS-selectors. Vervolgens noemen we gewoon een van de ingebouwde methoden.

Hoewel de meeste methoden zonder parameters kunnen worden aangeroepen, is het vaak nodig om hun functionaliteit aan te passen. Elk van de methoden heeft ten minste twee parameters: snelheid en Bel terug.

snelheid- bepaalt de duur van de animatie in seconden. U kunt een van de volgende als waarde doorgeven: trefwoorden: langzaam, normaal of snel; of stel de tijd in milliseconden in.

Bel terug Is een functie die wordt uitgevoerd nadat de animatie is voltooid. Je kunt het voor alles gebruiken, bijvoorbeeld een AJAX-oproep doen op de achtergrond, deel bijwerken gebruikersomgeving en nog veel meer. Je wordt alleen beperkt door je verbeeldingskracht.

• laten zien/verbergen- Methoden voor het tonen en verbergen van een element. Accepteert snelheid en terugbellen als parameters.
• schakelaar- Een methode die de weergave van een element manipuleert, afhankelijk van huidige toestand element. Dat wil zeggen, als het verborgen is, wordt het weergegeven en vice versa. Gebruikt show- en hide-methoden.
• naar beneden glijden/slideUp- Vrij voor de hand liggende methoden. Door de hoogte van een element te wijzigen, wordt een glijdende animatie gemaakt, die het element toont of verbergt.
• schuifToggle- Vrijwel hetzelfde als de toggle-methode, behalve dat het de slideDown / slideUp-methoden gebruikt om het element te tonen / verbergen.
• fadeIn/fade-out- Verander de transparantie van een element om een ​​vervagend effect te creëren.
• vervaag naar- Verandert de transparantie van het element volgens de doorgegeven waarde. Zoals je zou kunnen raden, is er een extra parameterdekking nodig, waarbij 0 volledige transparantie is en 1 volledige dekking.

Als extra functionaliteit is de methode schakelaar, kan als parameter een expressie nemen die bepaalt of het element moet worden weergegeven of verborgen.

Als u bijvoorbeeld alleen lijstitems wilt wisselen die de klasse effect, ziet uw code er als volgt uit:

$ ("li"). toggle ($ (dit) .hasClass ("effect"));

Simpel gezegd, de functie: schakelaar controleert de expressie die eraan is doorgegeven als een parameter, en als het waar is, schakelt het de zichtbaarheid van het element in. De expressie die we in het voorbeeld hebben doorgegeven, controleert of het element een bepaalde klasse heeft.

Stap 3. Maak je eigen animatie

Heel vaak voldoen de ingebouwde methoden niet aan uw behoeften, in welk geval u hoogstwaarschijnlijk uw eigen effecten wilt creëren. Met jQuery kunt u dit eenvoudig doen.

Om een ​​persoonlijk animatie-effect te creëren, heb je de methode nodig animeren... Het ziet er zo uit:

$ ("# somelement") animeren ((property: value),);

Methode animeren is vrij gelijkaardig aan elke andere methode in die zin dat het op precies dezelfde manier wordt gebruikt. We krijgen een element en geven er enkele parameters aan door. De geaccepteerde parameters zijn wat de methode is animeren verschillend van de vooraf ingestelde effecten.

De snelheids- en terugbelparameters hebben dezelfde functie als in eerdere methoden... Een object met eigenschappen bestaande uit een bepaald aantal sleutel/waarde-paren is wat deze methode uniek maakt. U passeert elke eigenschap waarmee u wilt animeren eindresultaat... Stel dat u de breedte van een element wilt animeren om deze te wijzigen in 90% van de huidige waarde. Dit kan als volgt:

$ ("# somelement") animeren ((breedte: "90%"), 350, function () (waarschuwing ("De animatie is voltooid.");));

Het bovenstaande codevoorbeeld animeert de breedtewijziging naar 90% en geeft vervolgens een bericht weer dat de animatie is voltooid.

Let op: u bent niet beperkt in hoeveelheid. U kunt animatie toevoegen aan een groot aantal eigenschappen, waaronder dekking, marges, opvulling, randen, lettergroottes. Methode animeren, is ook handig omdat het met elke maateenheid kan werken. Pixels, ems, percentages - alles werkt. Dus zelfs het versluierde codevoorbeeld hieronder zal werken. De waarheid zal niet erg duidelijk lijken.

$ ("# somelement"). animeren ((breedte: "90%" fontSize: "14em", hoogte: "183px", dekking: 0.8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm ",), 350, function () (waarschuwing (" De animatie is afgelopen. ");));

Wanneer u een eigenschap opgeeft die uit meerdere woorden bestaat, wordt deze zonder een streepje geschreven en moet de eerste letter van het tweede woord een hoofdletter krijgen. Deze notatie verschilt aanzienlijk van de gebruikelijke CSS-syntaxis, dus probeer deze te onthouden. Bijvoorbeeld het pand border-top, moet worden geschreven borderTop.

Opmerking: jQuery laat je alleen numerieke eigenschapswaarden animeren. Dit betekent dat u kleureigenschappen niet kunt animeren met alleen jQuery. Maar het is niet zo erg. Met een beetje jQuery UI-hulp kun je heel gemakkelijk kleuranimaties toevoegen.

Stap 4. Het effect instellen

Als je naar het simpele effect op de demopagina kijkt, heb je misschien een kleine fout opgemerkt. Meerdere keren met de muis over een element gaan, resulteert in een lange rij repetitieve animatie-effecten... Het resultaat is een onaangenaam, trillend effect.

De eenvoudigste manier om dit probleem op te lossen, is door de methode te gebruiken stop, net voordat de animatie begint. Deze methode ruimt de wachtrij perfect op en de animatie verloopt normaal.

Dit is bijvoorbeeld uw normale code:

$ ("# someelement") .hover (function () ($ (this) .animate ((top: 20), "fast");), function () ($ (this) .animate ((top: 0) , "snel");));

De methode gebruiken stop om onnodige herhalingen van de animatie te voorkomen, ziet uw nieuwe code er als volgt uit:

$ ("# someelement") .hover (function () ($ (this) .stop (). animeren ((top: 20), "fast");), function () ($ (this) .stop () .animeren ((boven: 0), "snel");));

Heel eenvoudig, toch? Maar deze methode heeft één klein probleem. Fast motion heeft geen repetitief effect, maar gaat ten koste van onvolledige animatie. Als je dit probleem volledig wilt oplossen, heb je een plug-in zoals hoverFlow nodig.

Stap 5. Realisme toevoegen - Versoepeling

Als je wat meer realisme wilt toevoegen, heb je nodig extra controle over de snelheid waarmee de animatie wordt uitgevoerd. Dit is waar versoepeling ons te hulp komt. versoepeling regelt de versnelling en vertraging van animatie in de loop van de tijd.

methode dat versoepeling gebruikt standaard, genaamd schommel, het is ingebouwd in de kernfunctionaliteit van jQuery. Met de versoepelingsplug-in van Robert Penner kunt u verschillende effecten gebruiken.

Er is maar één waarschuwing wanneer: het komt over het gebruik van persoonlijke verlichtingseffecten: je kunt ze alleen gebruiken in combinatie met speciale effecten animatie, dat wil zeggen, met de methode animeren ()... Nadat u de plug-in hebt aangesloten, is het heel eenvoudig om elke versoepelingsmethode te gebruiken door deze als parameter door te geven:

$ ("# somelement") animeren ((breedte: "90%" hoogte: "183px",), 550, "easeInElastic");

U kunt zien hoe de verschillende versoepelingseffecten er in actie uitzien op de demopagina onder de betreffende sectie. Hoewel sommige effecten mogelijk niet voor alle situaties geschikt zijn, ziet uw animatie er veel aantrekkelijker uit wanneer: correct gebruik enkele versoepelingsmethoden.

Stap 6. Een tandje bijsteken - jQuery UI

Upgraden naar jQuery UI brengt ons een aantal: vereiste functies... In feite, voor gebruik extra functies, je hebt geen volledige bibliotheek nodig. Om de gewenste functionaliteit te krijgen, hebt u ingebouwde effecten nodig. Niet de kern van de gebruikersinterface zelf, maar een bestand met ingebouwde effecten, dat ongeveer 10 kilobytes weegt.

Meest belangrijke functies De jQuery UI-effectenbibliotheek biedt ondersteuning voor kleuranimatie, easing en klasseovergangen.

Als je het je herinnert, heb ik al gezegd dat in jQuery animaties alleen kunnen worden toegepast op numerieke waarden... Met jQuery UI kunt u deze beperking vergeten. Nu kun je gemakkelijk animeren Achtergrond kleur element, framekleur en dergelijke. Ook, in plaats van aparte functies voor nieuwe functies te creëren, breidt jQuery UI eenvoudig de basisfunctionaliteit uit. animeren... Dat wil zeggen, als je de bibliotheek in je pagina hebt opgenomen, dan kun je de gebruikelijke methode gebruiken animeren en hij zal al het vuile werk voor je doen.

Als u bijvoorbeeld de randkleur van een element tijdens het zweven wilt animeren, ziet uw code er als volgt uit:

$ (". block"). hover (function () ($ (this) .animate ((borderColor: "black"), 1000);), function () ($ (this) .animate ((borderColor: "red "), 500);));

Klasovergangen zijn verantwoordelijk voor het animeren tussen klassen. Als u met de kern jQuery-bibliotheek een klasse verwijdert en vervolgens toevoegt die het uiterlijk van een element verandert, gebeurt dit onmiddellijk. Als je een UI-bibliotheek tot je beschikking hebt, kun je slagen Extra opties die de snelheid van de animatie regelen, de methode versoepeling en Bel terug... Deze functionaliteit is, net als de vorige, bovenop de bestaande jQuery API gebouwd om het overgangsproces te vergemakkelijken.

Stap 7. Creëer je eerste, echte effect

Alle bovenstaande voorbeelden zijn slechts demoversies van de functionaliteit. Het zou leuk zijn om ze te gebruiken om een ​​echt effect te creëren. Dit is wat we gaan doen. Ons effect zal niet iets radicaal of bijzonders zijn, maar met de hulp leer je hoe je de opgedane kennis in de praktijk kunt toepassen.

Stel dat we een afbeelding moeten weergeven, waarbinnen twee secties verschijnen bij muisaanwijzer. Het bovenste gedeelte bevat de titel van de afbeelding, het onderste gedeelte bevat zijn korte beschrijving... Ik weet dat je heel veel verschillende plug-ins kunt vinden die hetzelfde doen, maar vandaag gaan we het helemaal opnieuw doen. Het is niet zo moeilijk als het klinkt. In feite is het heel eenvoudig en snel genoeg. Laten we beginnen.

HTML

Ten eerste hebben we een HTML-basis nodig.

Voor dit effect moeten we nadenken over de structuur van elk element. Elk element wordt verpakt in een div, met de klasse item... Binnen de div worden drie elementen geplaatst: een afbeelding en twee div's met de naam en beschrijving van de afbeelding.

De rest van de onderdelen zijn vrij eenvoudig. We moeten verbinding maken met de pagina jQuery-bibliotheek, jQuery UI en het bestand met onze aangepaste code. Onthoud dat we alleen jQuery UI-effecten nodig hebben. Als je meer effecten wilt toevoegen, heb je een speciale assembly nodig die je hier kunt downloaden.

Zo ziet onze pagina er in dit stadium uit.

CSS

.item (positie: relatief; marge: 20px 60px 40px 0; overloop: verborgen;) .item .title, .item .desc (achtergrond: # 000; kleur: #fff; positie: absoluut; weergave: blok; breedte: 638px ; dekking: 0.4;) .item .title (boven: 0; lettergrootte: 16px; opvulling: 12px 10px 25px 0; tekstuitlijning: rechtsrechts;) .item .desc (onder: 0; lettergrootte: 12px; opvulling: 5px 0 15px 10px;)

Er zijn een paar dingen waar je hier op moet letten. Elk element heeft een eigenschappenset positie in waarde familielid, zodat het gemakkelijk is om anderen in dit element te plaatsen. Ook krijgen de blokken de eigenschap overloop verborgen, zodat we de titel en beschrijving van de afbeelding van buitenaf kunnen verbergen wanneer ze niet nodig zijn.

Blokken die een titel en beschrijving bevatten, hebben de eigenschap ingesteld positie: absoluut zodat ze precies in de afbeeldingsdoos worden gepositioneerd. Coördinaat toegewezen aan titel boven: 0 dus het staat bovenaan, en de beschrijving bodem: 0, en dienovereenkomstig bevindt het zich onderaan.

De rest van de CSS is heel eenvoudig, met toegewezen letterstijlen, een beetje positionering. Niets speciaals.

Nu ziet onze pagina er zo uit.

JavaScript-magie inschakelen

$ (document) .ready (functie () (// Code voor andere delen van de demo $ (". item"). children ("div.title"). animeren ((top: -60), 300); $ (". item"). kinderen ("div.desc"). animeren ((onder: -40), 300); $ (". item"). hover (function () ($ (this) .children ("div.title"). stop (). animeren ((top: 0), 700, "easeOutBounce"); $ (this ) .children ("div.desc"). stop (). animeren ((onder: 0), 700, "easeOutBounce");), functie () ($ (this) .children ("div.title"). stop (). animeren ((boven: -60), 500); $ (this) .children ("div.desc"). stop (). animeren ((onder: -40), 400);)); $ (". titel, .desc"). hover (function () ($ (this) .stop (). animeren ((backgroundColor: "# 444"), 700, "easeOutSine");), function () ( $ (this) .stop (). animeren ((backgroundColor: "# 000"), 700);)); ));

Het ziet er misschien een beetje ingewikkeld uit, maar dat is het echt niet. Laten we elk onderdeel eens bekijken.

De logica achter dit effect is heel eenvoudig. Omdat we de elementen absoluut hebben gepositioneerd, verbergen we ze eerst buiten de afbeeldingsbox. Wanneer we over de afbeeldingen zweven, hoeven we ze alleen maar terug te brengen naar hun oorspronkelijke positie.

Eerst verplaatsen we de titel en beschrijving buiten het bovenliggende blok. Maar in plaats van CSS te gebruiken, doen we dit JavaScript gebruiken, om zeer specifieke redenen. Zelfs als JS is uitgeschakeld, blijft de pagina functioneel. De titel en beschrijving blijven bovenaan de afbeelding staan ​​en verschijnen alsof er een zweefeffect is toegepast. Maar als we deze blokken zouden verbergen met CSS gebruiken en de JS op de pagina zou worden uitgeschakeld, ze zouden nooit op het scherm verschijnen.

Onze code begint met het maken van een functie zweven voor elk artikel. De eerste functie wordt uitgevoerd bij muisaanwijzer, de tweede daarentegen bij terugtrekking.

Binnen een functie, dit- geeft het element aan dat de gebeurtenis heeft geactiveerd. We gebruiken de methode: animeren, om de corresponderende waarden te wijzigen. We gebruiken ook versoepeling om meer aantrekkingskracht aan ons effect toe te voegen. Wanneer we met de muis bewegen, veranderen we de waarden gewoon terug naar hun oorspronkelijke staat.

Als kleine toevoeging zal het zweven over titel- of beschrijvingsblokken langzaam van kleur veranderen, dankzij jQuery UI.

Dat is alles, ons effect is klaar voor gebruik. U kunt kijken naar en met de gegeven voorbeelden.

Met de jQuery Animated ()-methode kunt u aangepaste animaties maken.

Voorbeelden van JQuery-animaties

JQuery-animatie - animeer () methode

De jQuery animate ()-methode wordt gebruikt om aangepaste animaties te maken.

Syntaxis:

$(selector) .animeren (( params} , snelheid, terugbellen);

Verplichte parameter Params definieert de formatie CSS-eigenschappen animatie.

De optionele snelheidsparameter bepaalt de duur van het effect. Het kan de volgende waarden aannemen: "slow", "fast" of milliseconden.

De optionele callback-parameter is de naam van de functie die na voltooiing moet worden uitgevoerd.

In het volgende voorbeeld wordt een eenvoudige toepassingsmethode voor animeren () getoond. het