Maison  >  Article  >  interface Web  >  Comment faire disparaître progressivement les images avec jquery

Comment faire disparaître progressivement les images avec jquery

青灯夜游
青灯夜游original
2022-04-21 14:50:022380parcourir

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>

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>

Comment faire disparaître progressivement les images avec jquery

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn