Animaties implementeren met jQuery

De geanimeerde effecten in jQuery Het zijn niet de animaties die we kennen, dat wil zeggen, we gaan geen beweging geven aan een tekening, het is belangrijk om dit te verduidelijken omdat het tot verwarring kan leiden. Deze geanimeerde effecten verwijzen naar de manier waarop de overgangen van elementen worden gegenereerd binnen de ZON, een element dat langzaam vanuit een hoek van de browser kan bewegen of in duizenden stukjes kan verdwijnen.
Op het eerste gezicht lijkt het misschien dat ze nuttig voor ons zijn, maar als we willen dat een element verschijnt of verdwijnt, maakt het ons misschien niet uit hoe het gebeurt, maar voor degenen die het gedrag van de gebruikersinterfaces Dit is erg belangrijk omdat het de stemming van de gebruiker kan bepalen of kan worden weergegeven als een subtiele manier om het beeld wat aantrekkelijker te maken.
Er zijn natuurlijk mensen die het gebruik van geanimeerde effecten misbruiken en overdrijven en de interface zo overbelasten dat het zwaar of onbetrouwbaar wordt en de gebruiker doet lijden bij het gebruik van het systeem, daarom is het noodzakelijk om een ​​minimum aan geweten en matiging bij het toepassen van dit soort effecten.
Het is belangrijk om te weten dat de verschillende soorten animaties Ze hebben een aantal beheersbare opties van de oproep die we doen, we kunnen de duur ervan regelen, zodat we kunnen kalibreren of het effect de bruikbaarheid beïnvloedt of niet en of het, afhankelijk van de tijdsduur, gedetailleerd kan worden en het gewenste effect kan bereiken en we kan ook de uit te voeren functie of methode aangeven in de Bel terug aan het einde van de animatie, bijvoorbeeld als we een knop laten verdwijnen wanneer deze er niet meer is, wordt een methode uitgevoerd die de gebruiker vervolgens een bericht stuurt.
Een andere optie die we hebben is om een objectkaart waarin we de geavanceerde of exclusieve opties definiëren van het geanimeerde effect dat we gebruiken, maar dit is vooral wanneer we iets heel specifieks en geavanceerds willen doen. De syntaxis voor het gebruik van deze opties is als volgt:

 $ (kiezer) .effect (duur); $ (kiezer) .effect (duur, CallBack-functie); $ (kiezer) .effect (functionCallBack); $ (kiezer) .effect (mapObjects); 

Omdat we zien dat elke regel overeenkomt met elk van de mogelijke variaties die we in standaardanimaties kunnen toepassen, is het mogelijk dat sommige animaties een bepaald kenmerk hebben, maar in degenen die we in deze tutorial zullen zien, zullen we hiermee werken.
Een van de meest gebruikte en meest bruikbare effecten die we kunnen bedenken is het tonen en verbergen van elementen en het blijkt ook dat het vrij eenvoudige effecten zijn om te implementeren, daarom gaan we ze als voorbeeld gebruiken.
toon () en verberg ()De methoden die ons in staat stellen om deze doelen te bereiken zijn: Show() Y verbergen (), aangezien we hun namen in het Engels zien corresponderen met de actie, tonen voor de eerste en verbergen voor de tweede, deze kunnen worden toegepast op elk element binnen onze ZON, dus ze zijn heel praktisch en nuttig.
We gaan een kleine animatie maken waarin we de duur en de aanroep van een functie gaan gebruiken Bel terug op het moment dat we het uitvoeren, passen we de effecten toe Show() Y verbergen () en zo kunnen we leren hoe deze worden gebruikt.
In de volgende code zien we hoe we in de eerste plaats de bibliotheek opnemen jQuery van een van de CDN voldoende, hiermee vermijden we dat we het lokaal moeten opslaan en dus zullen we profiteren van de browsercache.
Dan definiëren we twee blokken genaamd item 1 Y element2 respectievelijk, waar de eerste is verborgen en de tweede zichtbaar en tot slot hebben we een knop die zegt start waarop we toepassen in zijn klikgebeurtenis die de functie uitvoert aanmoedigen().
De functie aanmoedigen() pas eerst de animatie toe Show() naar de item 1 en geeft het een waarde van 1000 milliseconden wat gelijk is aan 1 seconde en hieraan tellen we a Bel terug waar we het effect toepassen verbergen () De onze element2 en genereert een bericht per console.
In de animatie verbergen () waar passen we op? element2 we hebben een gemaakt Bel terug waar we ook een bericht per console zullen schrijven. Laten we dus eens kijken naar de code voor ons eerste voorbeeld:

 Animaties
Dit is ons eerste verborgen element

Om de animatie uit te voeren, klik op de knop
Begin 

Laten we nu kijken hoe het eruit ziet in onze browser, in de volgende afbeelding zien we de HTML Laten we, voordat we een actie uitvoeren, eens kijken hoe de item 1 niet laten zien:

Nu zullen we in de volgende afbeelding zien wat er gebeurt na het klikken op de knop Begin, zullen we merken dat we nu het verborgen element zien en in de console zullen we twee berichten hebben, als ze het voorbeeld live doen, zullen ze ook zien hoe het ene element eerst verschijnt en een tweede later het andere verdwijnt:

Op een eenvoudige manier hebben we leven gegeven aan het tonen en verbergen van de elementen in ons document HTML.
Er zijn momenten waarop we willen dat een knop werkt als een schakelaar, waarbij een element of een groep elementen wordt weergegeven en verborgen, hoewel dit gemakkelijk te doen is door toestanden te evalueren en de methoden te gebruiken Show() Y verbergen (), de waarheid is dat we te veel code zouden genereren voor zoiets eenvoudigs, daarom heeft het team van jQuery ze hebben erover nagedacht en ze geven ons de methode schakelaar ().
Wat doet de methode toggle ()?Wat deze methode doet, is de huidige staat van het element evalueren en dus als het zichtbaar is, verbergt het het en als het verborgen is, toont het het, zoals aangegeven door het gedrag van het schakelaartype. Het beste is dat we aan deze methode de verschillende animatie-opties kunnen toevoegen, met de duur en de mogelijkheid om de Bel terug.
Laten we nu een voorbeeld bouwen waarin we in de praktijk brengen wat we hebben geleerd over de toggle () -methode, laten we de onderstaande code bekijken:

 Animaties
Het resultaat van het uitvoeren van het toggle-effect ().

Begin 

In de volgende code zullen we zien hoe we een div hebben gemaakt met de naam item 1 die in eerste instantie verborgen is, dan hebben we een knop Begin die bij klikken de animatiefunctie aanroept, deze heeft de methode schakelaar () toegepast op het element en in eerste instantie zal het verschijnen en een bericht per console weergeven.
Laten we de beginstatus van deze code per browser bekijken, we zullen merken dat we alleen de knop hebben en dat er niets in de console staat:

Laten we nu eens kijken hoe wanneer op de knop wordt geklikt het verborgen element verschijnt en het bericht naar ons weerspiegelt via de console:

Als we ten slotte nogmaals op de knop klikken, wordt het element verborgen en wordt het bericht herhaald in de console, wat we merken als we het nummer zien drie ernaast, die aangeeft hoe vaak de gebeurtenis is geactiveerd.

Ja ok Show() Y verbergen () Ze zijn effectief, ze lijken op het eerste gezicht misschien een beetje eenvoudig, daarom hebben we andere methoden die ons helpen verschillende animaties te maken, in dit geval hebben we het over vervagen Y dia die overeenkomen met vervagen en glijden, waarbij de eerste een effect heeft zoals verschijnen en de tweede glijdt van een rand van het scherm of de container van het element.
Laten we in de volgende lijst de equivalenten ervan bekijken: Show() en naar verbergen ():
fadeIn () en slideIn ()Ze komen overeen met de effecten om elementen weer te geven, dat wil zeggen, ze zijn gelijk aan de Show().
fadeOut en slideOut ()Ze komen overeen met de effecten om elementen te verbergen, dat wil zeggen, ze zijn gelijk aan de verbergen ().
fadeToggle () en slideToggle ()Er is een derde geval en het is het geval dat overeenkomt met de effecten van het schakelaartype en ze zijn gelijk aan schakelaar ().
Als oefening laten we u de voorbeelden nogmaals doornemen, maar met deze nieuwe methoden, zodat u uit de eerste hand kunt zien hoe ze werken.
Hiermee sluiten we deze tutorial af, we hebben geleerd onze elementen op een subtiele en intelligente manier te animeren, het is belangrijk om deze effecten niet te misbruiken door zeer lange animatietijden te plaatsen, want wat we zullen bereiken is om de gebruiker te irriteren en hun werk uitstellen en bedenken dat we vooral de bruikbaarheid moeten handhaven.