suchen

Heim  >  Artikel  >  Web-Frontend  >  Was sind die JQuery-Animationsfunktionen?

Was sind die JQuery-Animationsfunktionen?

青灯夜游
青灯夜游Original
2022-05-16 17:04:212876Durchsuche

Es gibt 17 JQuery-Animationsfunktionen: 1. animate(), um eine benutzerdefinierte Animation auf das ausgewählte Element anzuwenden; 2. hide(), um das ausgewählte Element auszublenden; 3. show(), um das ausgewählte Element anzuzeigen; . Elemente auswählen; 4. fadeOut(), wird verwendet, um Elemente durch Festlegen der Deckkraft auszublenden;

Was sind die JQuery-Animationsfunktionen?

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

jQuery-Animationsfunktionen

In der folgenden Tabelle sind alle jQuery-Methoden zum Erstellen von Animationseffekten aufgeführt.

Schieben Sie das ausgewählte Element und zeigen Sie es an, indem Sie die Höhe anpassen ausgewähltes ElementStoppt die aktuell laufende Animation auf dem ausgewählten Elementhide() und show() Wechseln zwischen Methoden
Methode Beschreibung
animate() Eine „benutzerdefinierte“ Animation auf das ausgewählte Element anwenden
clearQueue() Alle Warteschlangenfunktionen vom ausgewählten Element entfernen (wird noch ausgeführt)
delay() Legt eine Verzögerung
dequeue() für alle in der Warteschlange befindlichen Funktionen (noch nicht ausgeführt) des ausgewählten Elements fest.
dequeue() Entfernt die nächste in der Warteschlange befindliche Funktion und führt sie dann aus Die Funktion
fadeIn() ändert die Deckkraft der ausgewählten Elemente schrittweise von versteckt nach sichtbar
fadeOut() ändert die Deckkraft der ausgewählten Elemente schrittweise von sichtbar nach versteckt
fadeTo() Das ausgewählte Element schrittweise auf die angegebene Deckkraft ändern
fadeToggle() Zwischen den Methoden fadeIn() und fadeOut() wechseln
finish() Das ausgewählte Element anhalten und entfernen und abschließen Alle Animationen in der Warteschlange slideDown()
stop()
toggle()

下面来介绍一些常用动画函数。

1、animate()

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

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

示例：通过改变元素的高度，对元素应用动画：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#btn1").click(function() {
					$("#box").animate({
						height: "300px"
					});
				});
				$("#btn2").click(function() {
					$("#box").animate({
						height: "100px"
					});
				});
			});
		</script>
	</head>
	<body>

		<button id="btn1">使用动画放大高度</button>
		<button id="btn2">重置高度</button>
		<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
		</div>

	</body>
</html>

Was sind die JQuery-Animationsfunktionen?

2、hide()、show()和toggle()

  • hide() 方法隐藏被选元素。

  • show()显示被选元素

  • toggle()：hide() 和 show() 方法之间的切换

示例：隐藏或显示

元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$(".btn1").click(function() {
					$("p").hide();
				});
				$(".btn2").click(function() {
					$("p").show();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">隐藏</button>
		<button class="btn2">显示</button>

	</body>
</html>
</html>

Was sind die JQuery-Animationsfunktionen?

3、slideUp() 、slideDown()和slideToggle()

  • slideUp() 方法：以滑动方式隐藏被选元素。

  • slideDown() 方法：以滑动方式显示被选元素。

  • slideToggle() 方法：slideUp() 和 slideDown()方法之间的切换

示例：以滑动方式隐藏

元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$(".btn1").click(function() {
					$("p").slideUp();
				});
				$(".btn2").click(function() {
					$("p").slideDown();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">上滑</button>
		<button class="btn2">下滑</button>

	</body>
</html>

Was sind die JQuery-Animationsfunktionen?

4、fadeIn() 、 fadeOut()和fadeToggle()

  • fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。

  • fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。

  • fadeToggle()：fadeIn() 和 fadeOut()方法之间的切换

示例：使用淡入效果显示

元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$(".btn1").click(function() {
					$("p").fadeOut()
				});
				$(".btn2").click(function() {
					$("p").fadeIn();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">淡出</button>
		<button class="btn2">淡入</button>

	</body>
</html>

Was sind die JQuery-Animationsfunktionen?

5、fadeTo()

fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").fadeTo(1000, 0.4);
				});
			});
		</script>
	</head>
	<body>

		<button>逐渐改变P元素的不透明度</button>
		<p>这是一个段落。</p>

	</body>
</html>

Was sind die JQuery-Animationsfunktionen?

.....

【推荐学习：jQuery视频教程、web前端视频】

Das obige ist der detaillierte Inhalt vonWas sind die JQuery-Animationsfunktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css 字符串 margin background
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kann JQuery Klartextinhalte abfragen?Nächster Artikel：Kann JQuery Klartextinhalte abfragen?

In Verbindung stehende Artikel

Mehr sehen