Heim >Web-Frontend >Front-End-Fragen und Antworten >So lassen Sie Elemente in JQuery nach oben gleiten und verschwinden

So lassen Sie Elemente in JQuery nach oben gleiten und verschwinden

青灯夜游
青灯夜游Original
2022-04-27 19:28:122244Durchsuche

Methode: 1. Verwenden Sie slideUp(), die Syntax „$(“Element“).slideUp(milliseconds)“, um das ausgewählte Element gleitend auszublenden. 2. Verwenden Sie slideToggle(), die Syntax „$(“Element ") .slideToggle(milliseconds)", wenn sich das Element im angezeigten Zustand befindet, wird das Element gleitend ausgeblendet.

So lassen Sie Elemente in JQuery nach oben gleiten und verschwinden

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

jquery-Methode, um zu erkennen, dass das Element nach oben gleitet und verschwindet.

1. Verwenden Sie die Methode slideUp()

slideUp(), um das ausgewählte Element gleitend auszublenden.

Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (beeinflussen nicht mehr 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() {
				$(".btn1").click(function() {
					$("p").slideUp(1000);
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">上滑隐藏元素</button>

	</body>
</html>

So lassen Sie Elemente in JQuery nach oben gleiten und verschwinden

2. Mit slideToggle()

slideToggle() wird der Sichtbarkeitsstatus des ausgewählten Elements überprüft, wenn ein Element ausgeblendet ist. Das Element wird nach unten gleitend angezeigt.

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

		<p>这是一个段落。</p>
		<button class="btn1">滑动的隐藏/显示元素</button>

	</body>
</html>

So lassen Sie Elemente in JQuery nach oben gleiten und verschwinden

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

Das obige ist der detaillierte Inhalt vonSo lassen Sie Elemente in JQuery nach oben gleiten und verschwinden. 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