Animierung mit Deckkraft in JQuery Animate

Key Takeaways

• Bei der Verwendung von jQuery.animate kann Internet Explorer zu Font -Rendering -Problemen führen. Um dies zu vermeiden, verwenden Sie die Deckkraft von JQuery („Show“ oder Opazität („ausblenden“) Verknüpfungseigenschaften oder setzen
jQuery Animate kann verwendet werden, um benutzerdefinierte Animationen zu erstellen, die Deckkraft eines Elements zu verändern und mehrere CSS -Eigenschaften gleichzeitig zu animieren. Es kann mit anderen Methoden wie Hover () oder Click () kombiniert werden, um interaktive Animationen zu erstellen.
Obwohl JQuery Animate die Opazität eines Hintergrundbildes nicht direkt ändern kann, beinhaltet eine Problemumgehung die Erstellung eines separaten DIV für das Hintergrundbild und das Animieren der Deckkraft dieses DIV. Dadurch kann die Opazität des Hintergrundbildes geändert werden, ohne die Opazität anderer Inhalte zu beeinflussen.
Wenn Sie die Opazität verwenden, um mit jQuery.animate im Laufe der Zeit zu verblassen oder zu verblassen, werden Sie mit allen Versionen von Internet Explorer Probleme mit der Schriftartung von Schriftarten begegnen. Dies lässt Sie 2 Optionen zurück:

Verwenden Sie die Deckkraft von JQuery ("Show" oder die Opazität ("ausblenden") Verknüpfungseigenschaften, mit denen die Mängeln von IE von IE verarbeitet werden, oder setzen Sie die Filter -CSS -Eigenschaft auf "keine", sobald Sie Ihre Animation abgeschlossen haben. Wenn Sie offensichtlich etwas verblassen, haben Sie eine Auswahl, aber Sie haben keine Auswahl, als Option 2 zu verwenden. Ich stieß auf dies, da ich bei Cruiseabout in Tabs -Inhalten, die durch meine Verwendung von Opazität in fcl.tabs verursacht wurden, eine Schriftart von Schriftstellern hatte. Infolgedessen habe ich fcl.tabs gepatcht, um die Eigenschaften der Opazität "Show" und "Hide" anstelle von "0" zu verwenden? und „1? und das Problem wurde behoben. zerbrochener Code

$tabContent<span>.css('opacity', 0);
</span>$tabContent<span>.animate(
</span><span>{
</span><span>opacity: 1
</span><span>}, 350);</span>

CODE

behoben

$tabContent<span>.css('opacity', 'hide');
</span>$tabContent<span>.animate(
</span><span>{
</span><span>opacity: 'show'
</span><span>}, 350);</span>

häufig gestellte Fragen zur Animation der Opazität mit JQuery Animate

Wie kann ich JQuery animieren, um ein Element zu einer bestimmten Deckkraft zu verblassen? Mit der .animate () -Methode können Sie benutzerdefinierte Animationen erstellen. Sie können die CSS -Eigenschaft angeben, die Sie animieren möchten, und die Dauer der Animation. Um beispielsweise ein Element über 2 Sekunden zu 50% Opazität zu verblassen, würden Sie den folgenden Code verwenden:

$ ("#Element"). Animate ({

Opazität: 0,5
}, 2000); der Animation auf 2 Sekunden.

Was ist der Unterschied zwischen Jquery Fadeto () und Animate ()? Der Hauptunterschied zwischen den beiden besteht darin, dass Fadeto () spezifisch entwickelt wurde, um die Opazität zu ändern, während Animate () eine allgemeinere Funktion ist, die jede CSS -Eigenschaft animieren kann. Um beispielsweise ein Element über 2 Sekunden zu 50% Opazität zu verblassen, würden Sie den folgenden Code verwenden:

$ ("#Element"). Fadeto (2000, 0,5); Es nimmt ein Objekt als Argument an, bei dem jedes Eigenschaftswertepaar eine CSS-Eigenschaft und seinen Endwert darstellt. Zum Beispiel verwenden Sie sowohl die Opazität als auch die Breite eines Elements den folgenden Code:

$ ("#Element"). Animate ({
Opazität: 0,5,
Breite: "50%"
}, 2000); Zu 50% seiner ursprünglichen Größe und „2000“ setzt die Dauer der Animation auf 2 Sekunden. Die Hover () -Methode nimmt zwei Funktionen als Argumente an: eine zum Ausführen, wenn die Maus in das Element eingeht, und eine zum Ausführen, wenn die Maus das Element verlässt. function () {
$ (this) .animate ({opazität: 0.5}, 2000); Die endgültige Deckkraft von 50%, wenn die Maus in das Element eintritt, „Deckkraft: 1“ setzt die endgültige Deckkraft auf 100%, wenn die Maus das Element verlässt, und „2000“ setzt die Dauer jeder Animation auf 2 Sekunden.

Kann ich JQuery animieren, um ein Element kontinuierlich ein- und auszublenden? Dazu können Sie eine benutzerdefinierte Funktion erstellen, die das Element auswirkt, und ruft sich dann selbst auf, wenn die Animation das Element wieder verblasst. Dies erstellt eine Schleife, die fortgesetzt wird, bis die Seite aktualisiert wird oder die Funktion gestoppt wird. 2000, function () {

$ (this) .animate ({opazität: 1}, 2000, fadEinout); "2000" setzt die Dauer jeder Animation auf 2 Sekunden, und "Fadeinout" ist der Name der Funktion, die aufgerufen wird, wenn jede Animation abgeschlossen ist. Die Stop () -Methode stoppt die aktuell ausgeführte Animation im ausgewählten Element. Wenn Sie alle Animationen auf dem Element stoppen möchten, können Sie als erstes Argument an die Stop () -Methode übergeben:

$ ("#Element"). Stop (wahr);
Dieser Code stoppt alle Animationen, die nicht nur das Element für das Element verwenden können. JQuery animieren. Die Opazitätseigenschaft in CSS gilt für das gesamte Element, nicht nur für das Hintergrundbild. Dies bedeutet, dass, wenn Sie die Opazität eines Elements animieren, alle seine Inhalte (einschließlich Text- und Kinderelemente) auch transparent werden.

Es gibt jedoch eine Problemumgehung. Sie können ein separates Div für das Hintergrundbild erstellen und die Deckkraft dieses DIV animieren. Auf diese Weise kann die Opazität des Hintergrundbildes geändert werden, ohne die Opazität des anderen Inhalts zu beeinflussen. URL ('your-image.jpg'); Inhalt, „Deckkraft: 0,5“ setzt die endgültige Deckkraft auf 50%und „2000“ setzt die Dauer der Animation auf 2 Sekunden.

Wie kann ich JQuery animieren, um ein Element über eine bestimmte Dauer zu einer bestimmten Opazität zu verblassen? Mit der .animate () -Methode können Sie benutzerdefinierte Animationen erstellen. Sie können die CSS -Eigenschaft angeben, die Sie animieren möchten, den endgültigen Wert dieser Eigenschaft und die Dauer der Animation. Ist die ID des Elements, das Sie animieren möchten, „Depazität: 0,5“ die endgültige Deckkraft auf 50%setzt, und „5000“ setzt die Dauer der Animation auf 5 Sekunden. Dazu müssen Sie alle Elemente auswählen, die Sie animieren möchten, und die Methode .animate () verwenden. Die .animate () -Methode wendet die Animation auf jedes ausgewählte Element an. Die Elemente, die Sie animieren möchten, „Depazität: 0,5“ setzt die endgültige Deckkraft auf 50%und „2000“ setzt die Dauer der Animation auf 2 Sekunden. .animate () Methode zweimal hintereinander. Die erste .animate () -Methode verblasst das Element in die spezifische Deckkraft, und die zweite .animate () -Methode wird es beispielsweise wieder in seine ursprüngliche Deckkraft verblassen. 2000) .animate ({

Opazität: 1

}, 2000); Sekunden.

Kann ich JQuery animieren, um ein Element zu einer bestimmten Deckkraft zu verblassen, wenn eine Schaltfläche geklickt wird? Dazu müssen Sie die Schaltfläche auswählen und die Methode .click () verwenden. Die .click () -Methode nimmt eine Funktion als Argument an, die beim Klicken der Schaltfläche ausgeführt wird. 0,5

}, 2000);

Das obige ist der detaillierte Inhalt vonAnimierung mit Deckkraft in JQuery Animate. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!