我们之前讲到了hide()的用法，今天来加深理解一下，与hide()与之对应的就是show()函数了，一个是隐藏，一个是显示。它们的原型语法是：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);当然，初学者可能觉得看这个语法会有点复杂，其实这两个函数，hide()和show()里面，可以不填任何的参数在里面，也能达到隐藏和显示的效果。我们先来讲一下第一个参数，speed，里面可以填写一个数字，代表显示或者隐藏要在多少ms（毫秒）完成，也就是说我们填$("div").hide(1000);那么所有的div标签都会在1秒都隐藏起来；speed里也可以不填写数字，有两个字符串可以填写，一个是“fast”，另一个是“slow”，至于不填就是介于这两者之间了。callback我们称它为回调函数，作用是当hide()或者show()执行完毕后，所调用的一个function，也就是说可以这样写:
$("div").hide("fast",function(){ // 函数要进行的操作 });
这样子讲，是不是清楚了点。接下来我们来看个例子把：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide_p").click(function(){
$("p").hide(1000,function(){alert("hide完成")});
});
$("#show_p").click(function(){
$("p").show(2000);
});
});
</script>
</head>
<body>
<p>这是p元素标签</p>
<button id="hide_p">隐藏</button>
<button id="show_p">显示</button>
</body>
</html>这个代码，大家可以复制，去实践一下啊，通过点击隐藏button，<p>这是p元素标签</p>将会隐藏起来，当它完全隐藏后，系统就会输出一个对话框给你，告诉你hide完成；当你点击了显示的时候，它会用2秒显示完成。
接下来讲一个与show()和hide()都有关系的函数toggle()，这是个什么函数呢，大家想一下，我们一般控制一个物体运行和停止的时候，是不是都是用的同一个按钮，点一下运行，再点一下停止，toggle()函数就是这个按钮啦，一个按钮实现显示/隐藏两个功能。函数的语法：
$(selector).toggle(speed,callback);也是和hide()，show()一样的语法结构，可传可不传啦。接下来我们看一个例子咯，大家也动手做一做，光看没有用滴，只需要一个按钮实现来回切换:(大家也可以尝试着把js代码放进js文件，在html页面去引用它，因为这样写更加的规范，我这里为了方便大家观看，就放在一起啦，不会滴童鞋可以看)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").toggle();
});
});
</script>
</head>
<body>
<div>这是一个div</div>
<button>隐藏/显示</button>
</body>
</html>咳咳，接下来呢讲一个效果和hide(),show()类似的函数，不同的是hide()和show()是非常僵硬的隐藏和显示，而我要讲的fadeIn()和fadeOut()则是淡入/淡出，fadeIn()是淡入，例如div标签原本是隐藏的，但是使用了fadeIn这个函数后，它就会慢慢的从浅到深显示出来，而fadeOut就是隐藏了，从一开始慢慢的淡去，直到消失不见，我们来看看它的语法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);震惊！竟然和hide()和show()一样的语法结构哦，学起来也很简单呢，那么我们直接放一个例子，大家更改里面的参数，自己玩会，哦不，学习会~：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(2000);
});
$("#btn2").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(2000);
});
});
</script>
</head>
<body>
<button id="btn1">点击淡入 div </button>
<button id="btn2">点击淡出 div </button>
<hr>
<div id="div1" style="width:100px;height:100px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:100px;height:100px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:100px;height:100px;display:none;background-color:blue;"></div>
</body>
</html>可能很多童鞋就会想哩，那有没有一个按钮实现淡入/淡出哇，肯定有啊，fadeToggle()这个函数，和刚刚那个很像吧，toggle默认是直接显示/隐藏，而这个加上了fade，就是淡入/淡出的切换咯，语法结构也是一样的：
$(selector).fadeToggle(speed,callback);好的，直接上个代码，来实践下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeToggle();
});
});
</script>
</head>
<body>
<button>淡出/淡入</button>
<br><br>
<div style="width:100px;height:100px;background-color:blue;"></div>
</body>
</html>大家一定要去试试哦，最好自己去编写下，试试各种参数，例如fast，slow，或者输入毫秒，看每一个div消失的快慢，加深理解。好的，现在已经讲到如何淡入和淡出了，那么可不可以让他淡化到一定的程度显示呢，有的图片的确会淡化一些会好看一点，jQuery当然也提供了这种方法让你的元素按照一定的透明度显示出来，fadeTo()这个函数，语法结构会比原来的多一个opacity，用来控制透明度，数值介于0-1之间，越小透明度越高。
$(selector).fadeTo(speed,opacity,callback);接下来奉上实践代码给各位大哥，实践，实践，实践，重要的话说三次：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("fast",0.7);
});
});
</script>
</head>
<body>
<button>点我变淡</button>
<br><br>
<div id="div1" style="width:100px;height:100px;background-color:red;"></div><br>
<div id="div2" style="width:100px;height:100px;background-color:green;"></div><br>
</body>
</html>上一章：jQuery的学习笔记【一】 下一章：暂无
