Heim > Artikel > Web-Frontend > So animieren Sie Absatzelemente mit jQuery
So animieren Sie Absatzelemente mit jQuery
- 藏色散人Original
- 2021-08-27 11:40:431627Durchsuche
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>Der Effekt ist wie folgt:
Was hier jeder beherrschen muss, ist die Methode animate(): animate()方法：
animate() 方法执行 CSS 属性集的自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
→注：请使用 "+=" 或 "-=" 来创建相对动画。
animate()
animate() lautet wie folgt: (selector).animate({styles},speed,easing,callback)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“
- 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
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!