Animationen implementieren mit jQuery

Die animierten Effekte in jQuery Es sind nicht die Animationen, die wir kennen, das heißt, wir werden einer Zeichnung keine Bewegung verleihen. Es ist wichtig, dies zu klären, da dies zu Verwirrung führen kann. Diese animierten Effekte beziehen sich auf die Art und Weise, wie die Übergänge von Elementen innerhalb der SONNE, ein Element, das sich langsam aus einer Ecke des Browsers bewegen oder in Tausende von Teilen zerbrechen kann.
Auf den ersten Blick mag es für uns nützlich erscheinen, aber wenn wir wollen, dass ein Element erscheint oder verschwindet, ist es für uns vielleicht egal, wie es passiert, aber für diejenigen, die das Verhalten der Benutzeroberflächen Dies ist sehr wichtig, da es die Stimmung des Benutzers bestimmen oder als subtile Möglichkeit angezeigt werden kann, das Bild etwas ansprechender zu gestalten.
Es gibt natürlich diejenigen, die bei der Verwendung von animierten Effekten missbrauchen und übertreiben und die Benutzeroberfläche so überladen, dass sie schwer oder unzuverlässig wird und den Benutzer bei der Verwendung des Systems leidet, deshalb ist es notwendig, ein Minimum an Gewissen zu haben und Mäßigung beim Anwenden dieser Art von Effekten.
Es ist wichtig zu wissen, dass die unterschiedlichen Arten von Animationen Sie haben eine Reihe von kontrollierbaren Optionen aus dem Anruf, den wir tätigen, wir können seine Dauer steuern, so dass wir kalibrieren können, ob der Effekt die Benutzerfreundlichkeit beeinträchtigt oder nicht und ob er je nach Dauer detailliert werden und den gewünschten Effekt erzielen kann kann auch die auszuführende Funktion oder Methode im Ruf zurück am Ende der Animation, zum Beispiel wenn wir eine Schaltfläche verschwinden lassen, wenn sie nicht mehr vorhanden ist, wird eine Methode ausgeführt, die dem Benutzer dann eine Nachricht sendet.
Eine andere Möglichkeit, die wir haben, ist, a . zu übergeben Objektkarte in denen wir die erweiterten oder exklusiven Optionen des von uns verwendeten animierten Effekts definieren, dies jedoch vor allem dann, wenn wir etwas sehr Spezifisches und Erweitertes tun möchten. Die Syntax für die Verwendung dieser Optionen lautet wie folgt:

 $ (Selektor) .effect (Dauer); $ (Selektor) .effect (Dauer, CallBack-Funktion); $ (Selektor) .effect (functionCallBack); $ (Selektor) .effect (mapObjects); 

Da wir sehen, dass jede Zeile jeder der möglichen Variationen entspricht, die wir in Standardanimationen anwenden können, ist es möglich, dass einige Animationen eine bestimmte Eigenschaft haben, aber in den, die wir in diesem Tutorial sehen werden, werden wir damit arbeiten.
Einer der am häufigsten verwendeten und nützlichsten Effekte, die wir uns vorstellen können, ist das Ein- und Ausblenden von Elementen, und es stellt sich auch heraus, dass es sich um recht einfach zu implementierende Effekte handelt, weshalb wir sie als Beispiel verwenden werden.
anzeigen () und ausblenden ()Die Methoden, mit denen wir diese Ziele erreichen können, sind Show() Ja ausblenden (), wie wir sehen, entsprechen ihre Namen auf Englisch der Aktion, zeigen für die erste und verbergen für die zweite, diese können auf jedes Element in unserem angewendet werden SONNE, daher sind sie sehr praktisch und nützlich.
Wir werden eine kleine Animation erstellen, in der wir die Dauer und den Aufruf einer Funktion verwenden Ruf zurück Zum Zeitpunkt der Ausführung werden wir die Effekte anwenden Show() Ja ausblenden () und so können wir lernen, wie diese verwendet werden.
Im folgenden Code sehen wir, wie wir in erster Linie die Bibliothek einbinden jQuery von einem der CDN ausreichend, damit vermeiden wir eine lokale Speicherung und nutzen somit den Browser-Cache.
Dann definieren wir zwei Blöcke genannt Gegenstand 1 Ja element2 jeweils, wo die erste versteckt und die zweite sichtbar ist und schließlich haben wir eine Schaltfläche mit der Aufschrift "Start", auf die wir in ihrem Click-Ereignis anwenden, das die Funktion ausführt ermutigen().
Die Funktion ermutigen() Wende zuerst die Animation an Show() zum Gegenstand 1 und gibt ihm einen Wert von 1000 Millisekunden, was 1 Sekunde entspricht und dazu addieren wir a Ruf zurück wo wir den effekt anwenden ausblenden () unsere element2 und generiert eine Nachricht pro Konsole.
In der Animation ausblenden () wofür bewerben wir uns element2 wir haben ein erstellt Ruf zurück wo wir auch eine Nachricht per Konsole schreiben werden. Schauen wir uns also den Code für unser erstes Beispiel an:

 Animationen
Dies ist unser erstes verstecktes Element

Um die Animation auszuführen, klicken Sie auf die Schaltfläche
Start 

Schauen wir uns jetzt an, wie es in unserem Browser aussieht, im nächsten Bild sehen wir die HTML Bevor wir eine Aktion ausführen, schauen wir uns an, wie die Gegenstand 1 nicht gezeigt:

Im folgenden Bild sehen wir nun, was passiert, nachdem Sie auf die Schaltfläche geklickt haben Start, wir werden feststellen, dass wir jetzt das versteckte Element sehen und in der Konsole zwei Meldungen haben. Wenn sie das Beispiel live ausführen, sehen sie auch, wie ein Element zuerst erscheint und eine Sekunde später das andere verschwindet:

Auf einfache Weise haben wir dem Ein- und Ausblenden der Elemente in unserem Dokument Leben eingehaucht HTML.
Manchmal möchten wir, dass eine Schaltfläche als Schalter fungiert, der ein Element oder eine Gruppe von Elementen ein- und ausblendet, obwohl dies einfach durch Auswertung von Zuständen und Verwendung der Methoden möglich ist Show() Ja ausblenden (), die Wahrheit ist, dass wir für etwas so Einfaches zu viel Code generieren würden, deshalb ist das Team von jQuery sie haben darüber nachgedacht und sie liefern uns die Methode Umschalten ().
Was macht die Methode toggle()?Diese Methode wertet den aktuellen Zustand des Elements aus und blendet es aus, wenn es sichtbar ist, und wenn es ausgeblendet ist, zeigt es es an, wie durch das Verhalten des Schaltertyps angezeigt. Das Beste ist, dass wir dieser Methode die verschiedenen Animationsoptionen hinzufügen können, mit der Dauer und der Möglichkeit, dies zu tun Ruf zurück.
Lassen Sie uns nun ein Beispiel erstellen, in dem wir das, was wir über die Methode toggle() gelernt haben, in die Praxis umsetzen. Sehen wir uns den folgenden Code an:

 Animationen
Das Ergebnis der Ausführung des toggle()-Effekts.

Start 

Im folgenden Code sehen wir, wie wir ein div namens . erstellt haben Gegenstand 1 die zunächst ausgeblendet ist, dann haben wir eine Schaltfläche Start was beim Klicken die Animationsfunktion aufruft, hat die Methode Umschalten () auf das Element angewendet und es erscheint zunächst und zeigt eine Meldung pro Konsole an.
Sehen wir uns den Anfangszustand dieses Codes per Browser an. Wir werden feststellen, dass wir nur die Schaltfläche haben und in der Konsole nichts ist:

Sehen wir uns nun an, wie beim Klicken auf die Schaltfläche das versteckte Element erscheint und die Nachricht über die Konsole an uns widerspiegelt:

Wenn wir schließlich noch einmal auf die Schaltfläche klicken, wird das Element ausgeblendet und die Meldung in der Konsole wiederholt, was wir an der Zahl bemerken drei daneben, die angibt, wie oft das Ereignis ausgelöst wurde.

ja ok Show() Ja ausblenden () Sie sind effektiv, sie mögen auf den ersten Blick etwas einfach erscheinen, deshalb haben wir andere Methoden, die uns helfen, verschiedene Animationen zu erstellen, in diesem Fall sprechen wir von verblassen Ja gleiten die dem Verblassen und Gleiten entsprechen, wobei das erste eine Wirkung wie ein Erscheinen hat und das zweite von einer Kante des Bildschirms oder des Containers des Elements gleitet.
Sehen wir uns in der folgenden Liste seine Äquivalente zu Show() und zu ausblenden ():
FadeIn() und SlideIn()Sie entsprechen den Effekten zum Zeigen von Elementen, d.h. sie sind äquivalent zu den Show().
FadeOut und SlideOut ()Sie entsprechen den Effekten zum Ausblenden von Elementen, d.h. sie sind äquivalent zu den ausblenden ().
fadeToggle () und slideToggle ()Es gibt einen dritten Fall, und dieser entspricht den Schaltereffekten und sie sind äquivalent zu Umschalten ().
Als Übung lassen wir Sie die Beispiele noch einmal durchgehen, aber mit diesen neuen Methoden, damit Sie aus erster Hand sehen können, wie sie funktionieren.
Damit beenden wir dieses Tutorial, wir haben gelernt, unsere Elemente auf subtile und intelligente Weise zu animieren verzögern ihre Arbeit und denken daran, dass wir vor allem die Benutzerfreundlichkeit aufrechterhalten müssen.