So lassen Sie Bilder mit JQuery nach und nach verschwinden-Front-End-Fragen und Antworten-php.cn

So lassen Sie Bilder mit JQuery nach und nach verschwinden

青灯夜游

Freigeben： 2022-04-21 14:50:02

Original

2379 Leute haben es durchsucht

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>

Nach dem Login kopieren

So lassen Sie Bilder mit JQuery nach und nach verschwinden Methode 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>

Nach dem Login kopieren

【Empfohlenes Lernen: So lassen Sie Bilder mit JQuery nach und nach verschwinden jQuery-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!