Animationen: Verwendung von Fadeout- und SlideToggle-Funktionen in jQuery

Nach dem Tutorial der letzten Woche zum Erstellen von Animationen mit jQuery werde ich diese Woche zeigen, wie Sie eine Animation mit den Funktionen .fadeout () und .slideToggle () erstellen. Alle in dieser Demonstration verwendeten Dateien (Bilder, CSS, HTML, Skript) stehen zum Download zur Verfügung, sodass Sie mitverfolgen können.

Die jQuery-Bibliothek bietet verschiedene Methoden zum Einfügen von Animationen in Webdokumentseiten. Dazu gehören einfache Standardanimationen, die häufig verwendet werden, und die Möglichkeit, anspruchsvolle benutzerdefinierte Effekte zu erstellen. In diesem Segment werden wir einige der Effektmethoden genau untersuchen und die Fähigkeit von jQuery aufzeigen, dem Besucher visuelles Feedback zu geben.

Die Ausblendfunktion

Die Funktion jQuery .fadeout () verbirgt die übereinstimmenden Elemente, indem sie in einen transparenten Zustand versetzt werden und die Deckkraft angepasst wird. Sobald die Deckkraft 0 erreicht, wird der Anzeigezustand der Stileigenschaft auf "Keine" gesetzt, und das Element wirkt sich nicht mehr auf das Layout des Objekts oder der Seite aus.

Syntax für die Ausblendfunktion:

.fadeOut (Dauer , Lockerung , Rückruf)

  • Dauer - Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
  • Beschleunigung - Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
  • Rückruf - Eine Funktion, die aufgerufen werden kann, sobald die Animation abgeschlossen ist.

Ähnlich wie bei der Funktion .animate () werden die Dauern in Millisekunden angegeben, die Beschleunigung gibt die Geschwindigkeit an, mit der die Animation an verschiedenen Punkten während der Aktion fortschreitet, und die Rückruffunktion wird ausgelöst, sobald die Animation abgeschlossen ist.

Demonstration der Ausblendfunktion

Wir werden einen Absatz mit einer "langsamen" Dauer ausblenden und die Funktion "Rückruf vollständig" mit dem folgenden HTML-Code in unsere Datei " index.html " (im Download enthalten) aufnehmen:

Klicken Sie hier, um den Absatz auszublenden!

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud übung velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "

Die folgenden Stile sind in unserer Datei styles.css enthalten:

 #fadeOut, #fadeOutLinear, #slideBox { 
 Cursor: Zeiger; 
 Rahmenfarbe: #CCC; 
 Rand: fest dünn; 
 Breite: 250px; 
 Polsterung: 5px; 
 Textausrichtung: Mitte; 
 }} 
 #Komplett { 
 Textdekoration: unterstreichen; 
 Schriftfamilie: "Trebuchet MS", Arial, Helvetica, serifenlos; 
 Rand: 10px; 
 Polsterung: 10px; 
 Farbe: # 339; 
 }} 
 Artikel p { 
 Schriftfamilie: "Trebuchet MS", Arial, Helvetica, serifenlos; 
 Schriftgröße: 14px; 
 }} 

Und der folgende jQuery-Code wurde zu unserer Ereignisfunktion "Dokument bereit" hinzugefügt:

 // JavaScript 
 $ (Dokument) .ready (Funktion () { 
 // Absatz ausblenden 
 $ ('# fadeOut'). click (function () { 
 $ ('# fadeP'). fadeOut ('langsam', function () { 
 // Animation abgeschlossen. 
 $ (this) .after ('Ausblenden ist jetzt abgeschlossen!'); 
 }); 
 }); 
 }); 
 Denken Sie daran, Ihre Dateien index.html und styles.css zu speichern, dann den HTML-Code in Ihrem Browser zu öffnen und auf "Klicken Sie hier, um den Absatz auszublenden!" Zu klicken. Verknüpfung; Die ursprüngliche (vorher) und resultierende (nachher) Ausgabe wird in Abbildung A angezeigt, wie in Chrome 18.0.1 gezeigt: 

Abbildung A.

Lockerung, eine optionale Zeichenfolge

Mit dem Update auf jQuery 1.4.3 wird die Beschleunigung zum Leben erweckt. Hier kann die optionale Zeichenfolge zum Benennen einer Beschleunigungsfunktion verwendet werden. Lockerungsfunktionen legen fest und steuern die Geschwindigkeit, mit der die Animation an verschiedenen Punkten innerhalb der Animation fortschreitet, und wie sie sich im Laufe der Zeit entwickelt, indem sie ihre Beschleunigung manipuliert. Die beiden integrierten Implementierungsmethoden in der jQuery-Bibliothek sind die Standardeinstellungen, die als Swing bezeichnet werden, und eine, die mit konstanter Geschwindigkeit fortschreitet und als linear bezeichnet wird . Für wirklich dramatische Beschleunigungseffekte bietet das jQuery-Beschleunigungs-Plug-In noch mehr Animationsmöglichkeiten. Derzeit befindet sich das Plug-In jedoch in der Entwicklung.

Diese Demonstration zeigt ein Ausblenden des Orchideenbildes, das im vorherigen Tutorial verwendet wurde, und wir werden den linearen Leichtigkeitseffekt einbeziehen.

Fügen wir zunächst den HTML-Code direkt unter dem vorhandenen Code hinzu:

Klicken Sie hier, um das Bild auszublenden!

Anschließend wird die jQuery-Funktion zur Dokumentbereitschaftsfunktion hinzugefügt:

 // Bild ausblenden 
 $ ('# fadeOutLinear'). click (function () { 
 $ ('# fadeImage'). fadeOut ('langsam', 'linear', function () { 
 // Animation abgeschlossen. 
 $ (this) .after ('Ausblenden ist jetzt abgeschlossen!'); 
 }); 
 }); 
Speichern Sie die Datei index.html in Ihrem Texteditor, aktualisieren Sie die Seite in Ihrem Browser und klicken Sie dann auf "Klicken Sie hier, um das Bild auszublenden!" Verknüpfung. Abbildung B zeigt das Vorher-Bild und Abbildung C zeigt es nach dem Ausblenden.

Abbildung B.

Abbildung C.

Die Rückruffunktionen für beide Demonstrationen wurden in jedem Beispiel mit der jQuery implementiert:

 $ (this) .after ('Ausblenden ist jetzt abgeschlossen!'); 

Demonstration der Funktion slideToggle ()

Die Funktion jQuery .slideToggle () zeigt die ausgeblendeten Elemente mit einer Gleitbewegung an oder verbirgt sie. Die Syntax für den Schiebeschalter wird unten angezeigt:

 .slideToggle (Dauer , Lockerung , Rückruf) 

Haben Sie die Ähnlichkeit der Syntax- und Eigenschaftsoptionen mit dem Schiebeschalter und den Animations- und Ausblendeffekten bemerkt? Der Unterschied für den Sliding-Toggle-Effekt besteht darin, dass die unteren Teile des übereinstimmenden Elementsatzes nach oben oder unten gleiten und somit bei Ausführung des Ereignisses sichtbar oder verborgen werden. Wenn das Element anfänglich angezeigt wird, wird es nach Ausführung der Funktion ausgeblendet, und wenn das Element anfänglich ausgeblendet wird, wird es angezeigt. Daher wird die Anzeigeeigenschaft bei Bedarf gespeichert und wiederhergestellt. Wenn die Höhe des Elements nach einer ausgeblendeten Animation 0 erreicht, wird die Anzeigestileigenschaft auf "Keine" gesetzt, um sicherzustellen, dass das Element das Layout der Seite nicht mehr beeinflusst.

Zur Demonstration der Folienumschaltfunktion fügen wir der Datei index.html den folgenden HTML-Code hinzu:

Klicken Sie hier, um die Box zu schieben!

"Die Zeit ist nur der Bach, in dem ich angeln gehe."

 Henry David Thoreau

Wir werden auch einen Stil für die ID = "Box" in unserer Datei styles.css hinzufügen:

 #box { 
 Rand oben: 25px; 
 Randfarbe: # 33F; 
 Rand: fest dünn; 
 Breite: 270px; 
 Höhe: 100px; 
 Polsterung: 5px; 
 Hintergrundfarbe: # 0C6; 
 }} 

Und dies ist die jQuery für die Folienumschaltfunktion, die der Dokumentbereitschaftsfunktion hinzugefügt wurde:

 // Slide-Toggle-Effekt 
 $ ('# slideBox'). click (function () { 
 $ ('# box'). slideToggle ('langsam', function () { 
 // Animation abgeschlossen. 
 $ (this) .after ('Folieneffekt ist jetzt abgeschlossen!'); 
 }); 
 }); 

Speichern Sie Ihre Dateien index.html und styles.css, kehren Sie zum Browser zurück und aktualisieren Sie Ihre Seite. Testen Sie das "Klicken Sie hier, um die Box zu schieben!" Verknüpfung. Die Ergebnisse werden in den folgenden Abbildungen angezeigt, wie in Chrome 18.0.1 dargestellt:

Abbildung D.

Abbildung E.

Klicken Sie erneut und das Element wird erneut angezeigt:

Abbildung F.

Beachten Sie, dass das Ereignis "Rückruf abgeschlossen" jedes Mal ausgelöst wird, wenn die Folienumschaltfunktion beendet wird. In diesem Fall gibt es zwei vollständige Benachrichtigungen, da das Ereignis zweimal ausgelöst wurde.

Praktische Anwendungen für die Folienumschaltfunktion umfassen zusätzliche Effekte für häufig gestellte Fragen mit gleitenden Antworten beim Klicken auf die zugehörige Frage, zusammenklappbare Menüs in der Navigation und das Erstellen eines "Chats mit mir!" Chat-Bereich, der beim Klicken geöffnet wird.

Mehr zu jQuery:

  • So erstellen Sie eine erweiterbare und kontrahierbare FAQ in jQueryTutorial: jQuery-Funktionen zum Anzeigen, Ausblenden und Umschalten
  • Verwendung von Filterfunktionen in jQuery
  • jQuery: So erhalten Sie Objekte nach ID, Klasse, Tag und Attribut
  • Erste Schritte mit jQuery

© Copyright 2021 | pepebotifarra.com