Heim > Artikel > Web-Frontend > So realisieren Sie den Austausch von Anzeigen und Ausblenden in JQuery

So realisieren Sie den Austausch von Anzeigen und Ausblenden in JQuery

青灯夜游Original: 2022-04-21 17:16:322828Durchsuche

Interchange-Methode: 1. Verwenden Sie „element object.toggle()“, um das Element auszublenden, wenn das Element sichtbar ist, und zeigen Sie das Element an, wenn es unsichtbar ist. 2. Verwenden Sie „element object.slideToggle()“, um das Element auszublenden wenn das Element sichtbar ist. Verstecken Sie dann das Element und zeigen Sie das Element an, wenn es unsichtbar ist. 3. Verwenden Sie „element object.fadeToggle()“.

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

jquery verfügt über drei Methoden zum Implementieren des Anzeige- und Ausblendungsaustauschs:

toggle()-Methode
slideToggle()-Methode
fadeToggle()-Methode

1.toggle() Methode

toggle()-Methode schaltet zwischen hide() und show() für das ausgewählte Element um.

Diese Methode prüft den Sichtbarkeitsstatus des ausgewählten Elements. Wenn ein Element ausgeblendet ist, wird show() ausgeführt, wenn ein Element sichtbar ist, wird hide() ausgeführt – dies erzeugt einen Toggle-Effekt.

Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (haben keinen Einfluss mehr auf das Layout der Seite).

<!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").toggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 hide() 和 show()</button>

	</body>
</html>

So realisieren Sie den Austausch von Anzeigen und Ausblenden in JQuery

2. slideToggle()-Methode

slideToggle()-Methode wechselt zwischen slideUp() und slideDown() für das ausgewählte Element.

Diese Methode prüft den Sichtbarkeitsstatus des ausgewählten Elements. Wenn ein Element ausgeblendet ist, wird slideDown() ausgeführt, und wenn ein Element sichtbar ist, wird slideUp() ausgeführt – dies erzeugt einen Umschalteffekt.

<!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").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 slideUp() 和 slideDown()</button>

	</body>
</html>

So realisieren Sie den Austausch von Anzeigen und Ausblenden in JQuery

3. fadeToggle()-Methode

fadeToggle()-Methode wechselt zwischen den Methoden fadeIn() und fadeOut().

Wenn Elemente ausgeblendet sind, zeigt fadeToggle() sie mit dem Einblendeffekt an.
Wenn Elemente eingeblendet sind, zeigt fadeToggle() sie mit dem Ausblendeffekt an.

Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (haben keinen Einfluss mehr auf das Layout der Seite).

<!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() {
					$("#div1").fadeToggle();
					$("#div2").fadeToggle("slow");
					$("#div3").fadeToggle(3000);
				});
			});
		</script>
	</head>
	<body>

		<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
		<button>点击淡入/淡出</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
		<br>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
		<br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

	</body>
</html>

So realisieren Sie den Austausch von Anzeigen und Ausblenden in JQuery

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonSo realisieren Sie den Austausch von Anzeigen und Ausblenden in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So übergeben Sie Parameter im ReaktionsrouterNächster Artikel：So übergeben Sie Parameter im Reaktionsrouter

In Verbindung stehende Artikel

Mehr sehen