How to make pictures gradually disappear with jquery-Front-end Q&A-php.cn

How to make pictures gradually disappear with jquery

青灯夜游

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

Original

2428 people have browsed it

Method of gradually disappearing: 1. Use fadeOut(), just set the number of milliseconds from visible to disappearing, the syntax is "$("img").fadeOut(number of milliseconds)"; 2. Use fadeTo() can set the transparency to drop to 0 in the specified number of milliseconds, the syntax is "$("img").fadeTo(number of milliseconds, 0)".

How to make pictures gradually disappear with jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery makes the picture gradually disappear

Method 1: Use fadeOut()---make the picture gradually disappear without taking up space

fadeOut() method uses the fade out effect to hide the selected elements

<!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="How to make pictures gradually disappear with jquery" ><br><br>
		<button>让图片逐渐消失</button>
	</body>
</html>

Copy after login

How to make pictures gradually disappear with jquery

Method 2: Use fadeTo()--- The placeholder makes the image gradually disappear

fadeTo() method gradually changes the opacity of the selected element to the specified value.

Just reduce the final transparency to 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="How to make pictures gradually disappear with jquery" ><br><br>
		<button>让图片逐渐消失</button>
	</body>
</html>

Copy after login

How to make pictures gradually disappear with jquery

[Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of How to make pictures gradually disappear with jquery. For more information, please follow other related articles on the PHP Chinese website!