开发者学堂课程【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>
以上效果运行在浏览器进行操作实践
