一、hide()和show()
hide()用来隐藏HTML元素。
show()用来显示HTML元素。
以上两个方法都有两个参数，第一个是变化时间，即显示或者隐藏的时间，第二个参数是动画完成后的回调函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: yellow;
}
</style>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
$(".showbtn").click(function(){
$("div").show(1000,"linear",function(){
alert("Show() 方法已完成!");
});
});
});
</script>
</head>
<body>
<div>隐藏和显示及设置回调函数</div>
<button class="hidebtn">隐藏</button>
<button class="showbtn">显示</button>
</body>
</html>
二、toggle()
toggle()可以用来切换hide()和show(0方法。
<!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(){
$("p").toggle(1000,getfun());
});
function getfun(){
alert("执行完毕！");
}
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>
重点来了：
关于toggle()的第二个参数。
1、如果方法不加括号，则会先执行动画效果，然后有几个元素就会执行几遍方法。
2、如果加括号，则会先执行函数，且只执行一次，然后执行动画效果。
3、如果直接在第二个参数上写方法，效果则和第一种相同。
1、
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000,getfun);
});
function getfun(){
alert("执行完毕！");
}
});
</script>
2、
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000,function(){
alert("执行完毕!");
});
});
});
</script>
//以上两种效果相同，都是先执行动画，后alert(),且都alert()两遍。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000,getfun());
});
function getfun(){
alert("执行完毕！");
}
});
</script>
//此情况是先执行函数，且只执行一次，然后执行动画。