element till höger tills det når den vänstra 250px-egenskapen:

Som standard alla HTML-element har en statisk position och kan inte flyttas.
För att manipulera positionen, se till att först ställa in positionen för elementets CSS-egenskap till relativ, fix eller absolut!

JQuery animate () - Manipulerar flera egenskaper

Observera att flera egenskaper kan animeras samtidigt:

Är det möjligt att manipulera alla CSS-egenskaper med metoden animera ()?

Ja nästan! Det finns dock en viktig sak att komma ihåg: alla fastighetsnamn måste vara kamelkapslade när delning med metoden animate (): Du måste skriva paddingLeft istället för padding-left, marginRight istället för margin-right, och så vidare.

Färganimering ingår inte heller i Jquerys huvudbibliotek.
Om du vill väcka färg till liv måste du ladda ner plugin-programmet Color Animations från jQuery.com.

JQuery animate () - Använder relativa värden

Dessutom kan du definiera relativa värden (värde sedan relativt till objektets nuvarande värde). Detta görs genom att sätta + = eller - = framför värdet:

JQuery animate () - med fördefinierade värden

Du kan till och med ange ett värde för animeringsegenskapen som "show", "hide" eller "toggle":

JQuery animate () - Använder köfunktioner

Jquery levereras med animationsköfunktionalitet som standard.

Det betyder att om du skriver flera animera ()-anrop efter varandra, skapar JQuery en "intern" kö med dessa metodanrop. Han startar sedan de animerade samtalen en efter en.

Så om du vill utföra olika animationer efter varandra, drar vi nytta av köfunktionaliteten:

Exempel 1

$ ("knapp"). klicka (funktion () (
var div = $ ("div");
div.animate ((höjd: "300px", opacitet: "0.4"), "långsam");
div.animate ((bredd: "300px", opacitet: "0.8"), "långsam");
div.animate ((höjd: "100px", opacitet: "0.4"), "långsam");
div.animate ((bredd: "100px", opacitet: "0.8"), "långsam");

En liten touch av animation kan piffa upp alla tråkiga gränssnitt. I dagens artikel får du lära dig hur du använder den korrekt med använder jQuery.

Introduktion

Animation är ett koncept som vanligtvis får blandade reaktioner från människor. Vissa anser att det är användbart, medan andra fördömer det överanvändning. Oavsett vilket, när den används på rätt sätt, pryder animering ofta användargränssnittet och gör det renare och mer levande. I dagens artikel ska vi ta en snabb titt på Grunderna i jQuery, sedan lär vi oss hur man skapar vår första animation, lär oss hur man bygger olika effekter och sedan skapar vi en animation som kan användas i riktiga projekt.

Steg 1. Grunderna i jQuery

jQuery är JavaScript-bibliotek, som syftar till att hjälpa utvecklaren att skapa rika, interaktiva webbplatser och användargränssnitt med minsta möjliga mängd kod.

En typisk kodrad ser ut så här:

$ (DOM Element) .någonting ();

Låt oss dela upp varje del:

• $ - Stenografi för jQuery-objekt. Om du använder flera ramverk samtidigt på samma sida, istället för $-tecknet, använd förkortningen jQuery: jQuery (DOM Element) .something ();
• (DOM-element)– Elementet som du ska göra något med. Detta är en av nyckelfunktioner jQuery. Du kan använda CSS Selectors för att få önskat föremål... Alla väljare som fungerar i en CSS-fil kan användas här. ID:n, klasser, pseudoklasser, vad som helst.
• .något ()- Vad du vill göra med det resulterande föremålet. Detta kan vara allt från att dölja ett element till att göra en AJAX-förfrågan till en händelsehanterare.

Idag kommer vi bara att titta på animation och effekterna förknippade med dess funktionalitet.

Steg 2. Använda de inbyggda effekterna

jQuery tillhandahåller ett stort antal inbyggda metoder som du kan använda direkt ur lådan. Det här är metoder för att visa/dölja element, med olika variationer, inklusive att skjuta ett element och ändra dess opacitet. Du kan också använda ett antal metoder växla som växlar synligheten för elementet.

Innan vi tittar på var och en av dessa metoder, ta en titt på det grundläggande formatet för att anropa varje metod:

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

Ovan är det grundläggande paradigmet för jQuery, först får vi elementet vi behöver med hjälp av CSS-väljare. Därefter kallar vi bara någon av de inbyggda metoderna.

Även om de flesta metoder kan anropas utan parametrar, är det ofta nödvändigt att anpassa deras funktionalitet. Var och en av metoderna tar minst två parametrar: fart och ring tillbaka.

fart- definierar varaktigheten av animationen i sekunder. Du kan skicka något av följande som ett värde nyckelord: långsam, normal eller snabb; eller ställ in tiden i millisekunder.

ring tillbakaÄr en funktion som exekveras efter att animeringen är klar. Du kan använda den till vad som helst, till exempel ringa ett AJAX-samtal i bakgrunden, uppdatera del användargränssnitt och mycket mer. Du begränsas bara av din fantasi.

• show/Dölj- Metoder för att visa och dölja ett element. Accepterar hastighet och återuppringning som parametrar.
• växla- En metod som manipulerar visningen av ett element, beroende på nuvarande tillstånd element. Det vill säga, om den är dold, visar den den och vice versa. Använder visa och dölja metoder.
• glida ner/glid upp– Ganska självklara metoder. Genom att ändra höjden på ett element skapas en glidande animation som visar eller döljer elementet.
• slideToggle- Ungefär samma som växlingsmetoden, förutom att den använder metoderna slideDown / slideUp för att visa / dölja elementet.
• tona in/tona ut- Ändra genomskinligheten för ett element för att skapa en blekningseffekt.
• fadeTo- Ändrar elementets transparens enligt det godkända värdet. Som du kanske gissar kräver det en extra parameteropacitet, där 0 är full transparens och 1 är full opacitet.

Som en extra funktionalitet, metoden växla, kan ta som en parameter ett uttryck som bestämmer om elementet ska visas eller döljas.

Till exempel, om du bara vill byta listobjekt som har klassen effekt, kommer din kod att se ut så här:

$ ("li"). toggle ($ (detta) .hasClass ("effekt"));

Enkelt uttryckt, funktionen växla kontrollerar uttrycket som skickas till det som en parameter, och om det är sant, växlar det synligheten för elementet. Uttrycket som vi skickade i exemplet kontrollerar om elementet har en viss klass.

Steg 3. Skapa din egen animation

Mycket ofta passar inte de inbyggda metoderna dina behov, i vilket fall du med största sannolikhet vill skapa dina egna effekter. Med jQuery kan du enkelt göra detta.

För att skapa en personlig animationseffekt behöver du metoden animera... Det ser ut så här:

$ ("# somelement"). animate ((egenskap: värde),);

Metod animeraär ganska lik vilken annan metod som helst genom att den används på exakt samma sätt. Vi får ett element och skickar sedan några parametrar till det. De accepterade parametrarna är vad metoden är animera skiljer sig från de förinställda effekterna.

Hastighets- och återuppringningsparametrarna utför samma funktion som i tidigare metoder... Ett objekt med egenskaper som består av ett visst antal nyckel-/värdepar är det som gör denna metod unik. Du passerar varje fastighet du vill animera tillsammans med slutresultat... Anta till exempel att du vill animera ett elements bredd så att det ändras till 90 % av dess nuvarande värde. Detta kan göras på följande sätt:

$ ("# somelement"). animate ((bredd: "90%"), 350, funktion () (alert ("Animeringen har slutat köras.");));

Ovanstående kodexempel animerar breddändringen till 90 % och visar sedan ett meddelande om att animeringen är klar.

Observera att du inte är begränsad i antal. Du kan lägga till animering till ett stort utbud av egenskaper, inklusive opacitet, marginaler, utfyllnad, ramar, teckenstorlekar. Metod animera, är också bekvämt eftersom det kan fungera med alla måttenheter. Pixlar, ems, procentsatser – allt fungerar. Så även det obfuskerade kodexemplet nedan kommer att fungera. Sanningen kommer inte att se särskilt tydlig ut.

$ ("# somelement"). animera ((bredd: "90%" fontSize: "14em", höjd: "183px", opacitet: 0.8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm ",), 350, function () (alert ("Animeringen har slutat köras. ");));

När man anger en egenskap som består av flera ord skrivs den utan bindestreck, och den första bokstaven i det andra ordet måste vara versal. Denna notation skiljer sig markant från den vanliga CSS-syntaxen, så se till att försöka komma ihåg den. Till exempel fastigheten border-top, bör skrivas borderTop.

notera: jQuery låter dig bara animera numeriska egenskapsvärden. Detta innebär att du inte kan animera färgegenskaper med endast jQuery. Men det är inte så illa. Med lite hjälp av jQuery UI kan du lägga till färganimationer väldigt enkelt.

Steg 4. Ställa in effekten

Om du tittar på den enkla effekten på demosidan kanske du har märkt ett litet fel. Att sväva flera gånger över ett element resulterar i en lång kö av repetitiva animationseffekter... Resultatet är en obehaglig, ryckande effekt.

Det enklaste sättet att lösa detta problem är att använda metoden sluta, precis innan animeringen startar. Denna metod städar upp kön perfekt och animeringen körs normalt.

Detta är till exempel din vanliga kod:

$ ("# someelement") .hover (funktion () ($ (detta) .animate ((överst: 20), "snabb");), function () ($ (detta) .animate ((överst: 0) , "snabb");));

Använder metoden sluta för att förhindra onödiga upprepningar av animationen kommer din nya kod att se ut så här:

$ ("# något element") .hover (funktion () ($ (detta) .stopp (). animera ((överst: 20), "snabb");), funktion () ($ (detta) .stopp () .animate ((överst: 0), "snabb");));

Väldigt enkelt, eller hur? Men denna metod har ett litet problem. Snabb rörelse ger inte en repetitiv effekt, men det kommer till priset av ofullständig animering. Om du vill lösa detta problem helt behöver du ett plugin som hoverFlow.

Steg 5. Lägga till realism - lättnader

Om du vill lägga till lite mer realism behöver du ytterligare kontrollöver hastigheten med vilken animeringen körs. Det är här lättnad kommer till vår räddning. Lättnad kontrollerar accelerationen och retardationen av animering över tiden.

Metod att lättnader använder som standard, kallas gunga, den är inbyggd i kärnfunktionaliteten i jQuery. Robert Penners easing plugin låter dig använda flera olika effekter.

Det finns bara en varning när det kommer om att använda personliga lättnadseffekter: du kan bara använda dem tillsammans med specialeffekter animation, det vill säga med metoden animera ()... När du väl har anslutit plugin-programmet är det väldigt enkelt att använda vilken lättnadsmetod som helst genom att skicka den som en parameter:

$ ("# somelement"). animate ((bredd: "90%" höjd: "183px",), 550, "easeInElastic");

Du kan kontrollera hur de olika lättnadseffekterna ser ut i aktion på demosidan under lämplig sektion. Även om vissa av effekterna kanske inte är lämpliga för alla situationer, kommer din animation att se mycket mer attraktiv ut när korrekt användning några lättnadsmetoder.

Steg 6. Går upp ett snäpp - jQuery UI

Uppgradering till jQuery UI ger oss ett antal nödvändiga funktioner... Faktiskt för användning ytterligare funktioner, du behöver inte ett komplett bibliotek. För att få den funktionalitet du vill ha behöver du inbyggda effekter. Inte kärnan i själva användargränssnittet, bara en fil med inbyggda effekter, som väger cirka 10 kilobyte.

Mest viktiga funktioner Effektbiblioteket i jQuery UI ger stöd för färganimering, lättnader och klassövergångar.

Om du kommer ihåg så har jag redan sagt att i jQuery kan animationer bara appliceras på numeriska värden... Med jQuery UI kan du glömma denna begränsning. Nu kan du enkelt animera bakgrundsfärg element, ramfärg och liknande. Dessutom, istället för att skapa separata funktioner för nya funktioner, utökar jQuery UI helt enkelt basfunktionaliteten. animera... Det vill säga, om du har inkluderat biblioteket på din sida så kan du använda den vanliga metoden animera och han kommer att göra allt det smutsiga arbetet åt dig.

Till exempel, om du vill animera kantfärgen för ett element när du svävar, så skulle din kod se ut så här:

$ (". block"). hover (funktion () ($ (detta) .animate ((borderColor: "svart"), 1000);), funktion () ($ (detta) .animate ((borderColor: "röd "), 500);));

Klassövergångar ansvarar för animering mellan klasser. Med kärnbiblioteket i jQuery, om du tar bort och sedan lägger till en klass som ändrar utseendet på ett element, händer det omedelbart. När du har ett UI-bibliotek till ditt förfogande kan du passera Extra tillval som styr hastigheten på animeringen, metoden lättnader och ring tillbaka... Denna funktionalitet, liksom de tidigare, är byggd ovanpå det befintliga jQuery API för att underlätta övergångsprocessen.

Steg 7. Skapa din första, riktiga effekt

Alla ovanstående exempel är bara demoversioner av funktionaliteten. Det skulle vara trevligt att använda dem för att skapa en verklig effekt. Det här är vad vi ska göra. Vår effekt kommer inte att vara något radikalt eller speciellt, men med dess hjälp kommer du att lära dig hur du tillämpar den kunskap som erhållits i praktiken.

Anta att vi måste visa en bild, inuti vilken två sektioner kommer att visas när du svävar musen. Den övre delen kommer att innehålla titeln på bilden, den nedre delen kommer att innehålla dess kort beskrivning... Jag vet att du kan hitta massor av olika plugins som gör samma sak, men idag ska vi göra det från grunden. Det är inte så svårt som det låter. Faktum är att det är väldigt enkelt och tillräckligt snabbt. Låt oss börja.

Html

Först behöver vi en HTML-bas.

För denna effekt måste vi tänka på strukturen för varje element. Varje element kommer att lindas in i en div, med klassen Artikel... Inuti div kommer tre element att placeras: en bild och två div som innehåller namnet och beskrivningen av bilden.

Resten av delarna är ganska okomplicerade. Vi måste ansluta till sidan jQuery bibliotek, jQuery UI och filen som innehåller vår anpassade kod. Kom ihåg att vi bara behöver jQuery UI-effekter, om du vill ha med fler effekter behöver du en speciell assembly som kan laddas ner här.

Så här kommer vår sida att se ut i detta skede.

CSS

.item (position: relativ; marginal: 20px 60px 40px 0; overflow: hidden;) .item .title, .item .desc (bakgrund: # 000; färg: #fff; position: absolut; display: block; bredd: 638px ; opacitet: 0,4;) .item .title (överst: 0; font-size: 16px; utfyllnad: 12px 10px 25px 0; text-align: rightright;) .item .desc (nederst: 0; font-size: 12px; stoppning: 5px 0 15px 10px;)

Det finns några saker du bör vara uppmärksam på här. Varje element har en egenskapsuppsättning placera i värde släkting, så att det är lätt att placera andra inuti detta element. Dessutom tilldelas blocken fastigheten overflow: gömd, så att vi kan dölja titeln och beskrivningen av bilden från utsidan när de inte behövs.

Block som innehåller en titel och beskrivning har egenskapen satt position: absolut så att de är exakt placerade i bildrutan. Koordinat tilldelad titel topp: 0 så det sitter överst, och beskrivningen botten: 0, och följaktligen är den placerad längst ner.

Resten av CSS är väldigt enkel, med typsnittsstilar tilldelade, lite positionering. Inget speciellt.

Nu ser vår sida ut så här.

Aktiverar JavaScript-magi

$ (dokument) .ready (funktion () (// Kod för andra delar av demon $ (". item"). barn ("div.title"). animera ((överst: -60), 300); $ (". objekt"). barn ("div.desc"). animera ((nederst: -40), 300); $ (". objekt"). hover (funktion () ($ (detta) .children ("div.title"). stop (). animate ((överst: 0), 700, "easeOutBounce"); $ (detta ) .children ("div.desc"). stop (). animate ((nederst: 0), 700, "easeOutBounce");), function () ($ (detta) .children ("div.title"). stop (). animate ((överst: -60), 500); $ (detta) .children ("div.desc"). stop (). animate ((nederst: -40), 400);)); $ (". title, .desc"). hover (funktion () ($ (detta) .stop (). animate ((bakgrundsfärg: "# 444"), 700, "easeOutSine");), function () ( $ (detta) .stop (). animate ((bakgrundsfärg: "# 000"), 700);)); ));

Det kan se lite komplicerat ut, men det är det verkligen inte. Låt oss ta en titt på varje del.

Logiken bakom denna effekt är mycket enkel. Eftersom vi placerade elementen absolut gömmer vi dem först utanför bildrutan. När vi håller muspekaren över bilderna behöver vi bara återställa dem till sin ursprungliga position.

Först flyttar vi titeln och beskrivningen utanför det överordnade blocket. Men istället för att använda CSS gör vi detta använder JavaScript, av mycket specifika skäl. Även om JS är inaktiverat kommer sidan fortfarande att fungera. Titeln och beskrivningen förblir överst på bilden och kommer att se ut som om en hovringseffekt hade tillämpats. Men om vi gömde dessa block med använder CSS och JS på sidan skulle inaktiveras, skulle de aldrig visas på skärmen.

Vår kod börjar med att skapa en funktion sväva för varje föremål. Den första funktionen utförs på musen, den andra, tvärtom, vid tillbakadragning.

Inuti en funktion, detta- indikerar elementet som utlöste händelsen. Vi använder metoden animera, för att ändra motsvarande värden. Vi använder också lättnader för att lägga till mer överklagande till vår effekt. När vi håller musen, ändrar vi bara värdena tillbaka till deras ursprungliga tillstånd.

Som ett litet tillägg kommer att sväva över titel- eller beskrivningsblocken sakta ändra färg, tack vare jQuery UI.

Det är allt, vår effekt är redo att användas. Du kan titta på och med de exempel som ges.

Metoden jQuery Animated () låter dig skapa anpassade animationer.

JQuery-animationsexempel

JQuery animation - animera () metod

Metoden jQuery animate () används för att skapa anpassade animationer.

Syntax:

$(väljare) .animate (( params} , hastighet, återuppringning);

Den obligatoriska parametern Params definierar formationen CSS-egenskaper animering.

Den valfria hastighetsparametern bestämmer effektens varaktighet. Den kan anta följande värden: "långsam", "snabb" eller millisekunder.

Den valfria callback-parametern är namnet på funktionen som ska köras när den är klar.

Följande exempel visar en enkel animeringsmetod (). den