So animieren Sie Absatzelemente mit jQuery-js-Tutorial-php.cn

So animieren Sie Absatzelemente mit jQuery

藏色散人

Freigeben： 2021-08-27 11:40:43

Original

1748 Leute haben es durchsucht

Im vorherigen Artikel „So fügen Sie Klick- und Doppelklickereignisse zu einem Element über jQuery hinzu“ habe ich Ihnen die Methode zum Hinzufügen von Klick- und Doppelklickereignissen zu einem Element mit jQuery vorgestellt. Freunde in Not können mehr darüber erfahren it~

Dieser Artikel Der Hauptinhalt besteht darin, die Verwendung von jQuery zum Animieren von Absatzelementen vorzustellen.

In diesem Artikel werden wir also jQuery verwenden, um Absatzelemente durch Klicken auf eine Schaltfläche zu animieren, und hauptsächlich die animate()-Methode verwenden, um Animationseffekte zu erzielen. Die animate()-Methode wird verwendet, um den Status eines Elements mit CSS-Stilen zu ändern. Diese Methode kann auch verwendet werden, um CSS-Eigenschaften zu ändern, um ausgewählte Elemente zu animieren.

Kommen wir direkt zum Code:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#GFG").animate({
                    opacity: 0.5,
                    fontSize: "3em",
                }, 1000);
            });
        });
    </script>
</head>

<body style="text-align: center;">
<h1 style="color: #ff311f;">
    PHP中文网
</h1>

<h3>
    如何用jQuery为段落元素设置动画？
</h3>

<p id="GFG">
    PHP中文网是你最佳的学习平台！
</p>

<button>点击这里！</button>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

GIF 2021-8-27 星期五上午 11-33-41.gif

Was hier jeder beherrschen muss, ist die Methode animate(): animate()方法：

animate() 方法执行 CSS 属性集的自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

→注：请使用 "+=" 或 "-=" 来创建相对动画。

animate()

animate() Die Methode führt den CSS-Attributsatz „Benutzerdefinierte Animation“ aus. Diese Methode ändert ein Element mithilfe von CSS-Stilen von einem Zustand in einen anderen. Die Werte der CSS-Eigenschaften ändern sich schrittweise, sodass Sie animierte Effekte erstellen können. Es können nur numerische Werte animiert werden (z. B. „margin:30px“). Zeichenfolgenwerte können nicht animiert werden (z. B. „Hintergrundfarbe: Rot“).

→Hinweis: Bitte verwenden Sie „+=" oder „-=", um relative Animationen zu erstellen. Die Syntax von

animate() lautet wie folgt:

(selector).animate({styles},speed,easing,callback)

Nach dem Login kopieren

Parameterstile sind erforderlich: Gibt eine oder mehrere CSS-Eigenschaften/Werte an, die Animationseffekte erzeugen.

Hinweis: Bei Verwendung mit der Methode animate() muss der Eigenschaftsname camelCase lauten: Sie müssen paddingLeft anstelle von padding-left, marginRight anstelle von margin-right usw. verwenden.

Der Parameter Geschwindigkeit ist optional: Gibt die Geschwindigkeit der Animation an.
Mögliche Werte:
ms
„langsam“

„schnell“

Der Parameter Easing ist optional: Gibt die Geschwindigkeit des Elements an verschiedenen Stellen in der Animation an. Der Standardwert ist „swing“.
Mögliche Werte:
„Swing“ – bewegt sich langsam am Anfang/Ende, bewegt sich schnell in der Mitte

„linear“ – bewegt sich mit konstanter Geschwindigkeit

Tipp: Weitere Erleichterungen verfügbar in der Erweiterungsfunktion. Der Callback-Parameter ist optional: die Funktion, die ausgeführt werden soll, nachdem die Animationsfunktion ausgeführt wurde. Abschließend möchte ich „

JavaScript Basics Tutorial🎜🎜“ und „🎜jquery Video Tutorial🎜“ empfehlen ~ Willkommen zum Lernen ~🎜

Das obige ist der detaillierte Inhalt vonSo animieren Sie Absatzelemente mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!