Implementera animationer med jQuery

De animerade effekterna i jQuery De är inte de animationer som vi känner till, det vill säga att vi inte kommer att ge rörelse till en teckning, det är viktigt att klargöra detta eftersom det kan leda till förvirring. Dessa animerade effekter hänvisar till det sätt på vilket elementets övergångar genereras inom SOL, ett element som kan röra sig långsamt från ett hörn av webbläsaren eller försvinna bryta i tusentals bitar.
Vid första anblicken kan det tyckas att de är användbara för oss, i slutändan om vi vill att ett element ska visas eller försvinna kan det inte spela någon roll för oss hur det händer, men för dem som studerar beteendet hos användargränssnitt Detta är mycket viktigt eftersom det kan ställa in användarens stämning eller visas som ett subtilt sätt att göra det visuella något mer tilltalande.
Det finns naturligtvis de som missbrukar och överdriver användningen av animerade effekter och överbelastar gränssnittet så mycket att det blir tungt eller opålitligt och får användaren att lida när man använder systemet, det är därför det är nödvändigt att ha ett minimum av samvete och måttlighet när du använder dessa typer av effekter.
Det är viktigt att veta att de olika typer av animationer De har ett antal kontrollerbara alternativ från samtalet vi ringer, vi kan styra dess varaktighet, så att vi kan kalibrera om effekten påverkar användbarheten eller inte och om det, beroende på den tid det varar, kan vara detaljerat och uppnå önskad effekt och vi kan också indikera funktionen eller metoden som ska utföras i ring tillbaka i slutet av animationen, till exempel om vi får en knapp att försvinna när den inte längre finns, körs en metod som sedan skickar användaren ett meddelande.
Ett annat alternativ vi har är att klara a objektkarta där vi definierar de avancerade eller exklusiva alternativen för den animerade effekten som vi använder, men detta är framför allt när vi vill göra något mycket specifikt och avancerat. Syntaxen för att använda dessa alternativ är följande:

 $ (väljare). effekt (varaktighet); $ (väljare). effekt (varaktighet, återuppringningsfunktion); $ (väljare) .effect (functionCallBack); $ (väljare) .effect (mapObjects); 

Eftersom vi ser att varje rad motsvarar var och en av de möjliga variationerna som vi kan tillämpa i standardanimationer, är det möjligt att någon animation har en särskild egenskap, men i de som vi kommer att se i denna handledning kommer vi att arbeta med detta.
En av de mest använda och mest användbara effekterna som vi kan tänka oss är att visa och gömma element och det visar sig också att de är ganska enkla effekter att implementera, det är därför vi ska använda dem som exempel.
visa () och dölja ()De metoder som gör att vi kan uppnå dessa mål är Visa() Y Dölj (), eftersom vi ser deras namn på engelska motsvara åtgärden, visa för det första och dölja för det andra, kan dessa tillämpas på alla element i vår SOL, så de är ganska praktiska och användbara.
Vi ska göra en liten animation där vi ska använda varaktigheten och samtalet till en funktion ring tillbaka vid tidpunkten för utförandet kommer vi att tillämpa effekterna Visa() Y Dölj () och så kan vi lära oss hur dessa används.
I följande kod ser vi hur vi i första hand inkluderar biblioteket jQuery från en av CDN tillräckligt, med detta undviker vi att behöva lagra det lokalt och därför kommer vi att dra nytta av webbläsarens cache.
Sedan definierar vi två block som heter artikel 1 Y element2 där den första är dold och den andra synlig och slutligen har vi en knapp som säger start som vi tillämpar i sin klickhändelse som kör funktionen uppmuntra().
Funktionen uppmuntra() applicera först animationen Visa() till artikel 1 och ger det ett värde på 1000 milli-sekunder vilket är lika med 1 sekund och till detta lägger vi till a ring tillbaka där vi tillämpar effekten Dölj () vår element2 och genererar ett meddelande per konsol.
Inuti animationen Dölj () vad applicerar vi på element2 vi skapade en ring tillbaka där vi också kommer att skriva ett meddelande per konsol. Så låt oss titta på koden för vårt första exempel:

 Animationer
Detta är vårt första dolda element

Klicka på knappen för att köra animationen
Start 

Låt oss nu se hur det ser ut i vår webbläsare, i nästa bild kommer vi att se HTML Innan vi utför någon åtgärd, låt oss titta på hur artikel 1 inte visad:

Nu i följande bild kommer vi att se vad som händer efter att du klickat på knappen Start, kommer vi att märka att nu ser vi det dolda elementet och i konsolen kommer vi att ha två meddelanden, om de gör exemplet live kommer de också att se hur ett element visas först och ett sekund senare försvinner det andra:

På ett enkelt sätt har vi gett liv åt att visa och dölja elementen i vårt dokument HTML.
Det finns tillfällen då vi vill att en knapp ska fungera som en omkopplare, som visar och gömmer ett element eller en grupp av element, även om detta är enkelt att göra genom att utvärdera tillstånd och använda metoderna Visa() Y Dölj (), sanningen är att vi skulle generera för mycket kod för något så enkelt, det är därför teamet av jQuery de tänkte på det och de förser oss med metoden växla ().
Vad gör metoden toggle ()?Vad den här metoden gör är att utvärdera elementets nuvarande tillstånd och därför, om det är synligt, döljer det det och om det är dolt visar det det, vilket indikeras av omkopplarens beteende. Det bästa är att till den här metoden kan vi lägga till de olika animationsalternativen, med varaktighet och möjlighet att göra ring tillbaka.
Låt oss nu bygga ett exempel där vi omsätter det vi har lärt oss om toggle () -metoden, låt oss se koden nedan:

 Animationer
Resultatet av att köra toggle () -effekten.

Start 

I följande kod kommer vi att se hur vi har skapat en div som heter artikel 1 som först är dold, då har vi en knapp Start som när du klickar kommer att anropa den animerade funktionen, kommer den att ha metoden växla () tillämpas på elementet och i första hand kommer det att visas och visa ett meddelande per konsol.
Låt oss se det ursprungliga tillståndet för denna kod med webbläsare, vi kommer att märka att vi bara har knappen och det finns ingenting i konsolen:

Låt oss nu se hur det dolda elementet visas och återspeglar meddelandet till oss via konsolen när du klickar på knappen:

Slutligen, om vi klickar på knappen igen, kommer elementet att döljas och meddelandet upprepas i konsolen, vilket vi märker när vi ser numret tre bredvid den, vilket anger hur många gånger händelsen har utlösts.

Ja OK Visa() Y Dölj () De är effektiva, de kan verka lite enkla vid första anblicken, det är därför vi har andra metoder som hjälper oss att göra olika animationer, i det här fallet pratar vi om blekna Y glida som motsvarar blekning och glidning, där den första har en effekt som att visas och den andra glider från en kant av skärmen eller elementets behållare.
Låt oss se i följande lista dess motsvarigheter till Visa() och till Dölj ():
fadeIn () och slideIn ()De motsvarar effekterna för att visa element, det vill säga de motsvarar Visa().
fadeOut och slideOut ()De motsvarar effekterna för att dölja element, det vill säga att de motsvarar Dölj ().
fadeToggle () och slideToggle ()Det finns ett tredje fall och det är det som motsvarar switch-effekten och de motsvarar växla ().
Som en övning låter vi dig gå igenom exemplen igen men med hjälp av dessa nya metoder så att du kan se hur de fungerar på egen hand.
Med detta avslutar vi denna handledning, vi har lärt oss att animera våra element på ett subtilt och intelligent sätt, det är viktigt att inte missbruka dessa effekter för att placera mycket långa animeringstider, eftersom det vi kommer att uppnå är att irritera användaren och försena deras arbete och komma ihåg att vi måste behålla användbarheten framför allt annat.