How to make pictures gradually disappear with jquery

青灯夜游
Release: 2022-04-21 14:50:02
Original
2405 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template