jQuery 效果- 隐藏和显示

2020-05-12 前端js 157

jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
```javascript
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
```
隐藏动画
```javascript
$("button").click(function(){
  $("p").hide(1000);
});
```
点击隐藏显示并且带动画
```javascript
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle(100);
  });
});
</script>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
```
**jQuery 效果 - 滑动**

jQuery slideToggle()
演示 jQuery slideToggle() 方法。
```javascript
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
```