Comment faire disparaître progressivement les images avec jquery-Questions et réponses frontales-php.cn

Comment faire disparaître progressivement les images avec jquery

青灯夜游

Libérer： 2022-04-21 14:50:02

original

2409 Les gens l'ont consulté

Comment faire disparaître : 1. Utilisez fadeOut(), définissez simplement le nombre de millisecondes de visible à disparaître, la syntaxe est "$("img").fadeOut(number of milliseconds)"; pour définir Réduisez simplement la transparence à 0 dans le nombre de millisecondes spécifié, la syntaxe est "$("img").fadeTo(number of milliseconds, 0)".

Comment faire disparaître progressivement les images avec jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

jquery fait disparaître progressivement l'image

Méthode 1 : utilisez fadeOut() --- fait disparaître progressivement l'image sans prendre de place

la méthodefadeOut() utilise l'effet de fondu pour masquer l'image sélectionnée 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="Comment faire disparaître progressivement les images avec jquery" ><br><br>
		<button>让图片逐渐消失</button>
	</body>
</html>

Copier après la connexion

Comment faire disparaître progressivement les images avec jquery

Méthode 2 : Utilisez fadeTo() --- l'espace réservé pour faire disparaître progressivement l'image

La méthode fadeTo() modifie progressivement l'opacité de l'élément sélectionné à la valeur spécifiée.

Réduisez simplement la transparence finale à 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="Comment faire disparaître progressivement les images avec jquery" ><br><br>
		<button>让图片逐渐消失</button>
	</body>
</html>

Copier après la connexion

Comment faire disparaître progressivement les images avec jquery