Einführung in Effekte

Einführung

Willkommen zur jQuery-Dokumentation! In diesem Lab erhalten Sie eine Einführung in Effekte.

Mit jQuery ist es einfacherweise möglich, einfache Effekte auf Ihrer Seite hinzuzufügen. Effekte können die integrierten Einstellungen verwenden oder eine benutzerdefinierte Dauer angeben. Sie können auch benutzerdefinierte Animationen beliebiger CSS-Eigenschaften erstellen.

Inhalt anzeigen und ausblenden

In der VM wurde bereits index.html bereitgestellt.

Mit jQuery können Sie Inhalte sofort mit .show() oder .hide() anzeigen oder ausblenden:

// Versteckt alle Absätze sofort
$("p").hide();

// Zeigt alle Divs, die die Klasse hidden haben, sofort an
$("div.hidden").show();

Wenn jQuery ein Element ausblendet, setzt es seine CSS-Eigenschaft display auf none. Dies bedeutet, dass der Inhalt eine Breite und Höhe von Null hat; es bedeutet nicht, dass der Inhalt einfach transparent wird und auf der Seite einen leeren Bereich hinterlässt.

jQuery kann auch Inhalte mittels Animationseffekten anzeigen oder ausblenden. Sie können .show() und .hide() mitteilen, Animationen auf verschiedene Weise zu verwenden. Eine Möglichkeit ist, einen Argument von 'slow', 'normal' oder 'fast' zu übergeben:

// Versteckt alle Absätze langsam
$("p").hide("slow");

// Zeigt alle Divs, die die Klasse hidden haben, schnell an
$("div.hidden").show("fast");

Wenn Sie eine genauere Kontrolle über die Dauer des Animationseffekts bevorzugen, können Sie die gewünschte Dauer in Millisekunden an .show() und .hide() übergeben:

// Versteckt alle Absätze innerhalb von einer halben Sekunde
$("p").hide(2000);

// Zeigt alle Divs, die die Klasse hidden haben, innerhalb von 1,25 Sekunden an
$("div.hidden").show(1250);

Die meisten Entwickler übergeben eine Anzahl von Millisekunden, um eine genauere Kontrolle über die Dauer zu haben.

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Anzeige basierend auf dem aktuellen Sichtbarkeitsstatus ändern

Mit jQuery können Sie auch die Sichtbarkeit eines Inhalts basierend auf seinem aktuellen Sichtbarkeitsstatus ändern. .toggle() zeigt Inhalte an, die derzeit ausgeblendet sind, und blendet Inhalte aus, die derzeit sichtbar sind. Sie können die gleichen Argumente an .toggle() übergeben wie an jede der oben genannten Effektmethoden.

// Wechselt die Anzeige aller Absätze sofort
$("p").toggle();

// Wechselt die Anzeige aller Divs innerhalb von 1,8 Sekunden
$("div").toggle(1800);

.toggle() verwendet eine Kombination aus Slide- und Fade-Effekten, genauso wie .show() und .hide().

Sie können die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Etwas nach Abschluss einer Animation

Ein häufiger Fehler bei der Implementierung von jQuery-Effekten besteht darin, anzunehmen, dass die Ausführung der nächsten Methode in Ihrer Kette bis zum Abschluss der Animation gewartet wird.

$("div.hidden").fadeIn(1500).addClass("lookAtMe");

Es ist wichtig zu verstehen, dass .fadeIn() oben nur die Animation startet. Sobald gestartet, wird die Animation durch schnelle Änderungen von CSS-Eigenschaften in einer JavaScript-setInterval()-Schleife implementiert. Wenn Sie .fadeIn() aufrufen, startet es die Animationsschleife und gibt dann das jQuery-Objekt zurück, das an .addClass() weitergegeben wird, das dann die lookAtMe-Stilklasse hinzufügt, während die Animationsschleife gerade erst beginnt.

Um eine Aktion bis nach Abschluss einer Animation zu verschieben, müssen Sie eine Animationsrückruffunktion verwenden. Sie können Ihre Animationsrückruf als zweites Argument an eine beliebige der oben diskutierten Animationsmethoden angeben. Für den obigen Codeausschnitt können wir einen Rückruf wie folgt implementieren:

// Fade in alle versteckten Absätze; fügen Sie dann eine Stilklasse hinzu (korrekt mit Animationsrückruf)
$("div.hidden").fadeIn(1500, function () {
  // this = DOM-Element, das gerade die Animation abgeschlossen hat
  $(this).addClass("lookAtMe");
});

Beachten Sie, dass Sie das Schlüsselwort this verwenden können, um sich auf das animierte DOM-Element zu beziehen. Beachten Sie auch, dass der Rückruf für jedes Element im jQuery-Objekt aufgerufen wird. Dies bedeutet, dass wenn Ihr Selektort keine Elemente zurückgibt, Ihr Animationsrückruf niemals ausgeführt wird! Sie können dieses Problem dadurch lösen, indem Sie testen, ob Ihre Auswahl Elemente zurückgegeben hat; wenn nicht, können Sie den Rückruf einfach sofort ausführen.

// Führen Sie einen Rückruf aus, auch wenn es keine Elemente zum Animieren gab
var someElement = $("#nonexistent");

var cb = function () {
  console.log("fertig!");
};

if (someElement.length) {
  someElement.fadeIn(300, cb);
} else {
  cb();
}

Sie können die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Einführung in Effekte" abgeschlossen. Um mehr über die jQuery-API zu erfahren, besuchen Sie bitte die offizielle jQuery-Dokumentation.