jQuery里的显示隐藏与JavaScript里面是不一样的，使用的方法是不一样的。
先给两个按钮，一个是显示一个隐藏，然后给它们做点击事件，然后给一个盒子做显示隐藏的时候可以看效果。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘按下换背景色</title>
<style>
div{
width:200px;
height:100px;
background:rgb(255, 206, 127);
}
</style>
</head>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<div></div>
</body>
</html>
效果图：
解析：先给两个button按钮，一个是显示一个是隐藏，可以不用给样式。在给一个盒子或者多个盒子，给宽高背景颜色，这里的这个盒子宽是200像素，高是100像素。背景颜色为rgb(255, 206, 127)。
下一步要写按钮的点击事件，用jQuery方法来写，需要引入插件。
代码：
<script src="./jquery-1.12.2.js"></script>
引入jQuery插件之后就可以给按钮写点击事件了
代码：
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<div></div>
<script src="./jquery-1.12.2.js"></script>
<script>
$("#btn1").click(function(){
$("div").slideDown(1000);
})
$("#btn2").click(function(){
$("div").slideUp(1000);
})
</script>
</body>
效果图：
隐藏：
显示：
解析：点击隐藏按钮，这个div盒子就会向上收缩，知道高的像素为零。点击显示，这个div盒子就会向下放知道恢复到我们给元素设置的高度，向上收隐藏可以使用slideUp（）方法，向下放显示可以使用slideDown（）方法。
有一种是用透明度的方法去显示隐藏盒子
代码：
<script>
$("#btn1").click(function(){
$("div").fadeIn(1000);
})
$("#btn2").click(function(){
$("div").fadeOut(1000);
})
</script>
效果图：
解析：点击显示和隐藏按钮，div盒子的透明度就会从零到一或者一到零，中间有一秒的过度事件这个过度事件也可以自己设置，透明度从零到一可以使用fadeIn（）方法，透明度从一到零可以使用fadeOut（）方法。
4613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
