So implementieren Sie das automatische Ausblenden in fünf Sekunden mit jquery-Front-End-Fragen und Antworten-php.cn

So implementieren Sie das automatische Ausblenden in fünf Sekunden mit jquery

青灯夜游

Freigeben： 2022-05-16 15:02:30

Original

1758 Leute haben es durchsucht

Zwei Methoden: 1. „setTimeout(function(){specified object.hide();},5000);“-Anweisung, um einen Verzögerungseffekt durch Einstellen eines Timers zu erzielen. 2. Verwenden Sie die Anweisung „specified object.delay(5000).fadeOut();“, um den Effekt durch Verzögerung der Codeausführungszeit zu erzielen.

So implementieren Sie das automatische Ausblenden in fünf Sekunden mit jquery

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

jquery implementiert das automatische Ausblenden für fünf Sekunden.

1. Verwenden Sie die Methode setTimeout(). Verwenden Sie die Methode setTimeout(), um die Methode function() nach 5 Sekunden festzulegen die Methode function() Verwenden Sie im Inneren die Methode hide(), um das angegebene Element zu implementieren.

$(document).ready(function() {
	$("button").click(function() {
		setTimeout(function() {
			$("div").hide(); 
		}, 5000);
	});
});

Nach dem Login kopieren

setTimeout() wird verwendet, um eine Funktion oder einen berechneten Ausdruck nach einer angegebenen Anzahl von Millisekunden aufzurufen.

setTimeout() führt Code nur einmal aus. Wenn Sie es mehrmals aufrufen möchten, verwenden Sie setInterval() oder lassen Sie den Code selbst setTimeout() erneut aufrufen.

So implementieren Sie das automatische Ausblenden in fünf Sekunden mit jquery

2. Verwenden Sie „delay()“, um fünf Sekunden festzulegen, um Elemente automatisch auszublenden.

Die Methode „delay()“ legt eine Verzögerung für die Ausführung des nächsten Elements in der Warteschlange fest.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.block {
			  width: 200px;
			  height: 200px;
			  background: brown;
			  cursor: pointer;
			  transition: 0.8s;
			}
		</style>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("div").delay(5000).fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="block"></div><br>
		<button>5秒隐藏div元素</button>
	</body>
</html>

Nach dem Login kopieren

【Empfohlenes Lernen: jQuery-Video-Tutorial,

Web-Frontend-Video

】

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das automatische Ausblenden in fünf Sekunden mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!