Auf den ersten Blick mag es so aussehen, als wären sie für uns nützlich. Letztendlich mag es für uns wenig ausmachen, ob ein Element erscheint oder verschwindet. Für diejenigen, die sich mit dem Verhalten von Benutzeroberflächen befassen, ist dies jedoch sehr wichtig, da es das Verhalten von Benutzeroberflächen bestimmen kann Stimmung oder Show des Benutzers als subtile Möglichkeit, das Visuelle attraktiver zu machen.
Es ist klar, wer die Verwendung von animierten Effekten missbraucht und übertreibt und sowohl die Schnittstelle überlastet, die schwer oder unzuverlässig wird, als auch den Benutzer unter der Verwendung des Systems leidet. Aus diesem Grund müssen Sie ein Minimum an Aufmerksamkeit und Mäßigung aufbringen bei der Anwendung dieser Art von Effekten.
Verfügbare Optionen für Animationen
Es ist wichtig zu wissen, dass die verschiedenen Arten von Animationen eine Reihe von steuerbaren Optionen für den von uns ausgeführten Aufruf haben. Wir können deren Dauer steuern, um zu beurteilen, ob der Effekt die Benutzerfreundlichkeit beeinflusst oder nicht und ob er je nach Zeitpunkt detailliert und ausführlich sein kann erreichen Sie den gewünschten Effekt und wir können auch die Funktion oder Methode angeben, die im Rückruf am Ende der Animation ausgeführt werden soll, zum Beispiel, wenn eine Schaltfläche ausgeblendet wird, wenn keine Methode mehr ausgeführt wird, die dem Benutzer dann eine Nachricht sendet .
Eine andere Möglichkeit besteht darin, eine Karte von Objekten zu übergeben, in der wir die erweiterten oder exklusiven Optionen des von uns verwendeten animierten Effekts definieren. Dies ist jedoch mehr als alles andere, wenn wir etwas sehr Spezifisches und Fortgeschrittenes tun möchten. Die Syntax zur Verwendung dieser Optionen lautet wie folgt:
$ (Selektor). Wirkung (Dauer); $ (selector). effect (duration, functionCallBack); $ (Selektor). effect (functionCallBack); $ (Selektor). effect (Objektübersicht);
Da wir sehen, dass jede Zeile den möglichen Variationen entspricht, die wir in Standardanimationen anwenden können, ist es möglich, dass einige Animationen eine bestimmte Funktion haben. In diesem Tutorial werden wir jedoch damit arbeiten.
Ein- und Ausblenden
Einer der am häufigsten verwendeten und nützlichsten Effekte, über die wir nachdenken können, ist das Ein- und Ausblenden von Elementen. Außerdem stellt sich heraus, dass diese Effekte recht einfach zu implementieren sind. Deshalb werden wir sie als Beispiel verwenden.
Ein praktisches Beispiel
Wir werden eine kleine Animation erstellen, in der wir die Dauer und den Aufruf einer CallBack- Funktion beim Ausführen verwenden, die show () – und hide () -Effekte anwenden und lernen, wie diese verwendet werden.
Im folgenden Code sehen wir zunächst, wie wir die jQuery- Bibliothek aus einem der entsprechenden CDNs einbinden . Auf diese Weise müssen wir sie nicht lokal speichern und verwenden den Cache des Browsers.
Dann definieren wir zwei Blöcke <div> mit den Bezeichnungen element1 und element2 , wobei der erste und der zweite ausgeblendet sind. Schließlich haben wir eine Schaltfläche mit der Bezeichnung start, auf die wir in Ihrem Klickereignis die Funktion animate () anwenden .
Die Funktion animate () wendet zuerst die Animation show () auf das Element 1 an und gibt ihm einen Wert von 1000 Millisekunden, was 1 Sekunde entspricht. Anschließend fügen wir einen Rückruf hinzu, in dem wir den Effekt hide () auf unser Element 2 und 3 anwenden generiert eine Nachricht von der Konsole.
In der hide () -Animation, die wir auf das Element2 anwenden, erstellen wir ein CallBack, in dem wir eine Nachricht über die Konsole schreiben. Schauen wir uns dann den Code für unser erstes Beispiel an:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Animationen </ title> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> </ head> <body> <div id = "item1" style = "display: none;"> <p> Dies ist unser erstes verstecktes Element </ p> </ div> <div id = "element2"> <p> Um die Animation auszuführen, müssen Sie auf die Schaltfläche klicken </ p> </ div> <button onclick = "Javascript: animate ();"> Start </ button> <script type = "text / javascript"> Funktion animate () { $ ("# item1"). show (1000, function () { console.log ("show item1"); $ ("# element2"). hide (1000, function () { console.log ("Wir verstecken das Element2"); }); }); } </ script> </ body> </ html>
Lassen Sie uns nun sehen, wie es in unserem Browser aussieht. In der folgenden Abbildung sehen wir den HTML- Code, bevor wir eine Aktion ausführen. Lassen Sie uns sehen, wie item1 nicht angezeigt wird:
Jetzt werden wir im nächsten Bild sehen, was passiert, wenn wir auf den Startknopf klicken. Wir werden feststellen, dass wir jetzt das versteckte Element sehen und in der Konsole werden wir zwei Meldungen haben. Wenn Sie das Live-Beispiel machen, werden Sie auch sehen, wie ein Element zuerst erscheint und ein zweites später verschwindet der andere:
Auf einfache Weise haben wir das Leben gegeben, die Elemente in unserem HTML- Dokument ein- und auszublenden.
Sichtbare und versteckte Zustände umschalten
Es gibt Zeiten, in denen eine Schaltfläche als Schalter fungieren soll und ein Element oder eine Gruppe von Elementen ein- und ausgeblendet werden soll, obwohl dies einfach ist, Zustände auszuwerten und die Methoden show () und hide () zu verwenden Wir würden zu viel Code für etwas so Einfaches generieren. Deshalb hat das jQuery- Team darüber nachgedacht und uns die toggle () -Methode zur Verfügung gestellt .
Implementieren Sie die toggle () -Methode
Lassen Sie uns nun ein Beispiel erstellen, in dem wir das, was wir über die toggle () -Methode gelernt haben, in die Praxis umsetzen. Sehen wir uns den folgenden Code an:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Animationen </ title> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> </ head> <body> <div id = "item1" style = "display: none;"> <p> Das Ergebnis beim Ausführen des Effekts toggle (). </ p> </ div> <button onclick = "Javascript: animate ();"> Start </ button> <script type = "text / javascript"> Funktion animate () { $ ("# item1"). toggle (1000, function () { console.log ("wir haben Toggle gemacht!"); }); } </ script> </ body> </ html>
Im folgenden Code sehen wir, wie wir ein div mit dem Namen element1 erstellt haben, das anfangs ausgeblendet ist. Dann haben wir eine Startschaltfläche , die beim Klicken die Animationsfunktion aufruft, die toggle () -Methode auf das Element anwendet und in erster Instanz erscheinen und zeigen eine Nachricht von der Konsole.
Betrachten wir den Anfangszustand dieses Codes nach Browsern, werden wir feststellen, dass wir nur die Schaltfläche haben und nichts in der Konsole ist:
Nun wollen wir sehen, wie auf die Schaltfläche geklickt wird, auf der das ausgeblendete Element angezeigt wird und die Meldung nach Konsole wiedergibt:
Wenn wir zum Schluss erneut auf die Schaltfläche klicken, wird das Element ausgeblendet und die Konsolenmeldung wird wiederholt. Dies ist uns aufgefallen, als wir die Nummer drei daneben sahen, die angibt, wie oft das Ereignis ausgelöst wurde.
Andere Animationen zum Ein- und Ausblenden von Elementen
Obwohl show () und hide () wirksam sind, scheinen sie auf den ersten Blick etwas einfach zu sein. Deshalb gibt es andere Methoden, mit denen wir verschiedene Animationen erstellen können. In diesem Fall sprechen wir von Fade und Slide, die Fading und entsprechen Schieben, wobei der erste Effekt so wirkt, wie er erscheint, und der zweite an einer Kante des Bildschirms oder des Containers des Elements verschoben wird.
Sehen wir uns in der folgenden Liste die Entsprechungen zu show () und hide () an:
Als Übung lassen wir Sie die Beispiele noch einmal machen, verwenden jedoch diese neuen Methoden, damit Sie aus erster Hand sehen können, wie sie funktionieren.
Mit dem Abschluss dieses Tutorials haben wir gelernt, unsere Elemente auf subtile und intelligente Weise zu animieren. Es ist wichtig, diese Effekte nicht für die Platzierung sehr langer Animationszeiten zu missbrauchen, da das, was wir erreichen, den Benutzer stören und seine Arbeit verzögern wird. Denken Sie daran, dass wir vor allem die Benutzerfreundlichkeit aufrechterhalten müssen.