Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen

jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen

青灯夜游
青灯夜游Original
2022-04-20 17:33:011658Durchsuche

Implementierungsmethode: 1. Verwenden Sie die Anweisung „$(“img“).delay(milliseconds).fadeOut()“ und „delay()“, um die Verzögerungssekunden festzulegen. 2. Verwenden Sie „setTimeout(function(){ $(“ img ").hide(); }, Millisekundenwert);" Anweisung, durch Timer verzögert.

jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen

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

Manchmal muss die Seite einige dynamische Effekte hinzufügen, indem eine Verzögerung von einigen Sekunden verwendet wird, um das Bild auszublenden und nach der Anzeige für eine bestimmte Anzahl von Sekunden zu verschwinden. Hier zeigen wir Ihnen, wie Sie mit jQuery die angegebene Anzahl von Sekunden festlegen (5 Sekunden), bevor Sie das Bild ausblenden.

Methode 1: Verwenden Sie die Methode .delay()

, um das IMG-Bild so einzustellen, dass es ausgeblendet wird, nachdem es 5 Sekunden lang angezeigt wurde.

<!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() {
					$("img").delay(5000).fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen" >
		<br><br>
		<button>实现5秒后隐藏图片</button>

	</body>
</html>

jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen

Methode 2: Verwenden Sie die Methode setTimeout()

Verwenden Sie setTimeout(), um einen Timer einzustellen, der das Bild ausblendet, nachdem es 5 Sekunden lang angezeigt wurde.

<!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() {
					setTimeout(function() { $("img").hide(); }, 5000);
				});
			});
		</script>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen" >
		<br><br>
		<button>实现5秒后隐藏图片</button>

	</body>
</html>

jquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen

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

Das obige ist der detaillierte Inhalt vonjquery implementiert, nach wie vielen Sekunden Bilder ausgeblendet werden sollen. 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