Home >Web Front-end >Front-end Q&A >How to realize the interchange of display and hide in jquery

How to realize the interchange of display and hide in jquery

青灯夜游Original: 2022-04-21 17:16:322890browse

Interchange method: 1. Use "element object.toggle()" to hide the element when the element is visible, and display the element when it is invisible; 2. Use "element object.slideToggle()" , when the element is visible, the element is hidden, when the element is invisible, the element is displayed; 3. Use "element object.fadeToggle()".

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

jquery has three methods to implement display and hide interchange:

toggle() method
slideToggle() method
fadeToggle() method

1、toggle() method

The toggle() method switches between hide() and show() on the selected element.

This method checks the visible status of the selected element. If an element is hidden, show() is run, if an element is visible, hide() is run - this creates a toggle effect.

Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").toggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 hide() 和 show()</button>

	</body>
</html>

How to realize the interchange of display and hide in jquery

2. slideToggle() method

slideToggle() method performs slideUp() and slideDown() on the selected element ) to switch between.

This method checks the visible status of the selected element. If an element is hidden, slideDown() is run, if an element is visible, slideUp() is run - this creates a toggle effect.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 slideUp() 和 slideDown()</button>

	</body>
</html>

How to realize the interchange of display and hide in jquery

3. fadeToggle() method

fadeToggle() method switches between fadeIn() and fadeOut() methods .

If the elements are faded out, fadeToggle() will use the fade in effect to display them.
If elements are faded in, fadeToggle() will display them using the fade out effect.

Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeToggle();
					$("#div2").fadeToggle("slow");
					$("#div3").fadeToggle(3000);
				});
			});
		</script>
	</head>
	<body>

		<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
		<button>点击淡入/淡出</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
		<br>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
		<br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

	</body>
</html>

How to realize the interchange of display and hide in jquery

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

The above is the detailed content of How to realize the interchange of display and hide in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：How to pass parameters in react routerNext article：How to pass parameters in react router

See more

How to realize the interchange of display and hide in jquery

Related articles