Heim >Web-Frontend >Front-End-Fragen und Antworten >So lassen Sie Bilder mit JQuery nach und nach verschwinden

So lassen Sie Bilder mit JQuery nach und nach verschwinden

青灯夜游
青灯夜游Original
2022-04-21 14:50:022422Durchsuche

So verblassen Sie: 1. Verwenden Sie fadeOut(), legen Sie einfach die Anzahl der Millisekunden vom Sichtbarwerden bis zum Verschwinden fest. Die Syntax lautet „$(„img“).fadeOut(Anzahl der Millisekunden)“ 2. Verwenden Sie fadeTo(); Zum Festlegen reduzieren Sie einfach die Transparenz in der angegebenen Anzahl von Millisekunden auf 0. Die Syntax lautet „$(„img“).fadeTo(Anzahl der Millisekunden, 0)“.

So lassen Sie Bilder mit JQuery nach und nach verschwinden

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

jquery lässt das Bild allmählich verschwinden

Methode 1: Verwenden Sie fadeOut() – lassen Sie das Bild allmählich verschwinden, ohne Platz zu beanspruchen. Die Methode „fadeOut()“ verwendet den Ausblendeffekt, um die Auswahl auszublenden element

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").fadeOut(3000);
				});
			});
		</script>
	</head>

	<body>
		<img  src="img/3.jpg"    style="max-width:90%" / alt="So lassen Sie Bilder mit JQuery nach und nach verschwinden" ><br><br>
		<button>让图片逐渐消失</button>
	</body>
</html>

So lassen Sie Bilder mit JQuery nach und nach verschwindenMethode 2: Verwenden Sie fadeTo() – den Platzhalter, um das Bild allmählich verschwinden zu lassen

Die Methode fadeTo() ändert schrittweise die Deckkraft des ausgewählten Elements auf den angegebenen Wert.

Reduzieren Sie einfach die endgültige Transparenz auf 0.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").fadeTo(3000,0);
				});
			});
		</script>
	</head>

	<body>
		<img  src="img/3.jpg"    style="max-width:90%" / alt="So lassen Sie Bilder mit JQuery nach und nach verschwinden" ><br><br>
		<button>让图片逐渐消失</button>
	</body>
</html>

【Empfohlenes Lernen: So lassen Sie Bilder mit JQuery nach und nach verschwindenjQuery-Video-Tutorial

,

Web-Frontend-Video

Das obige ist der detaillierte Inhalt vonSo lassen Sie Bilder mit JQuery nach und nach 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