In this section, we will learn how to use jQuery to achieve the display and hiding effects of elements.
hide() method
hide() method is used to hide the specified element, similar to the effect display:none
The syntax is as follows:
$(selector).hide(speed,easing,callback)speed: Optional, specifies the speed of the hidden effect. Optional values areslow,fast, milliseconds.easing: Optional. It specifies the speed of elements at different points in the animation. The optional values areswingandlinear.callback: optional, the function to be executed after thehide()
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$(".fruit").hide('slow','linear');
});
});
</script>
</head>
<body>
<div>
<button>隐藏下面内容</button>
<div class="fruit">
<p>我喜欢的水果：</p>
<ul>
<li>西瓜</li>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>哈密瓜</li>
</ul>
</div>
</div>
</body>
</html>Demonstration effect in the browser:
show() method
show() method is used to show hidden specified elements. Similar to the effect of display:none
The syntax is as follows:
$(selector).show(speed,easing,callback)show() process parameters and hide() the like parameters.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".hide").click(function(){
$(".fruit").hide('slow','linear');
});
$(".show").click(function(){
$(".fruit").show('slow','linear');
});
});
</script>
</head>
<body>
<div>
<button class="hide">隐藏下面内容</button>
<button class="show">显示下面内容</button>
<div class="fruit">
<p>我喜欢的水果：</p>
<ul>
<li>西瓜</li>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>哈密瓜</li>
</ul>
</div>
</div>
</body>
</html>Demonstration effect in the browser:
toggle() method
In the above example, we need to use two buttons to control separately when we realize the display and hide effects. So is there a way to show and hide effects with just one button? This requires the toggle() method. The toggle() method can be used to switch between the hide() and show() methods.
The syntax is as follows:
$(selector).toggle(speed,callback,switch)speed: Optional. It specifies the speed of the element from visible to hidden. The optional values areslow,normal,fast, milliseconds.callback: optional, the function to be executed after thetoggleswitch: Optional. It specifiestoggleshould hide or show all selected elements.Truemeans to show all elements,Falsemeans to hide all elements. If you set this parameter, you cannot use thespeedandcallbackparameters.
Example:
For example, to achieve the above example effect, we only need to write like the following, mainly to modify the code part of jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".toggle").click(function(){
$(".fruit").toggle(1000);
});
});
</script>
</head>
<body>
<div>
<button class="toggle">切换显示与隐藏</button>
<div class="fruit">
<p>我喜欢的水果：</p>
<ul>
<li>西瓜</li>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>哈密瓜</li>
</ul>
</div>
</div>
</body>
</html>Demonstration effect in the browser:
Let's take a look at the difference, the code needed to show() and hide()
$(function(){
$(".hide").click(function(){
$(".fruit").hide('slow','linear');
});
$(".show").click(function(){
$(".fruit").show('slow','linear');
});
});The code needed to use the toggle()
$(function(){
$(".toggle").click(function(){
$(".fruit").toggle(1000);
});
});So obviously, it is very convenient to toggle() method when you need to switch between the two effects of hiding and showing.
Link: https://www.9xkd.com/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。