开发者学堂课程【jQuery 开发教程：jQuery 特效_隐藏与显示】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4307
jQuery 特效_隐藏与显示
课程概要
1、隐藏与显示
2、淡入淡出
3、滑动
4、回调
一、 隐藏与显示
首先打开一个工程，新建一个html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.2.1.min.js"></script
</head>
<style>//格式设置
div{
width: 40px;
height: 40pX;
background-color : aquamarine;
margin-left: 10px;
float: left;
}
</style>
<body>
<p>hello</p>
<button id="hide ">隐藏</button>//按钮
<button id="show">显示</button>
<button id="toggle>隐藏/显示 /button>
<script>
$ ( function(){//功能实现设置
S("#hide") .click( function() {//隐藏
$("p").hide( 1000);
});
Hide 参数执行效果：
Hello
隐藏
点击隐藏
可发现 hello 已经被隐藏
$("#show').click(function(){//显示
$ ("p") .show ( 1000);//控制时间
Show 参数执行效果：
点击显示
隐藏的内容被显示
$("#toggLe").click( function(){//包含隐藏和显示
$("p").toggle(1000);
Toggle参数执行效果：
点击隐藏和显示
再次点击
可发现同时实现了隐藏和显示两种功能
//五个水平排列的div
for(var i=0;i<5;i++){
$ ( "<div>s").appendTo(document.body);
}
//五个水平排列的 div
//点击隐藏
$ ("div").click (function(){
//设置执行时间为两秒
$ (this) .hide(2000,function(){
每点击一个小盒子就会缓慢消失（两秒）
//设置消失后移除
$(this) .remove();
点击消失后就会移除：
});
})
})
</script>
</body>
</html>
以上效果运行在浏览器进行操作实践