How to implement automatic hiding in five seconds with jquery

青灯夜游
Release: 2022-05-16 15:02:30
Original
1702 people have browsed it

Two methods: 1. The "setTimeout(function(){specified object.hide();},5000);" statement achieves the delay effect by setting a timer. 2. Use the "specified object.delay(5000).fadeOut();" statement to achieve the effect by delaying the code execution time.

How to implement automatic hiding in five seconds with jquery

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

jquery implements automatic hiding for five seconds

1. Use the setTimeout() method

  • Use the setTimeout() method to set the function() method to be executed after 5 seconds

  • In the function() method, use the hide() method to implement the specified element.

$(document).ready(function() {
	$("button").click(function() {
		setTimeout(function() {
			$("div").hide(); 
		}, 5000);
	});
});
Copy after login

How to implement automatic hiding in five seconds with jquery

Description:

The setTimeout() method is used to call a function or calculate an expression after a specified number of milliseconds Mode.

setTimeout() only executes code once. If you want to call it multiple times, use setInterval() or have the code itself call setTimeout() again.

2. Use delay() to set five seconds to automatically hide elements.

The delay() method sets a delay for the execution of the next item in the queue.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.block {
			  width: 200px;
			  height: 200px;
			  background: brown;
			  cursor: pointer;
			  transition: 0.8s;
			}
		</style>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("div").delay(5000).fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="block"></div><br>
		<button>5秒隐藏div元素</button>
	</body>
</html>
Copy after login

How to implement automatic hiding in five seconds with jquery

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

The above is the detailed content of How to implement automatic hiding in five seconds 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