<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>15.1jQuery效果-隐藏与显示</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1. hide()隐藏元素，相当于js中display:none
$('#btn1').click(function(){
$('#div1').hide();//无参数
//hide(t),t是时间，单位是毫秒
$('#div2').hide(1000);
//hide(fast/slow/normal)
//速度可以用fast/slow/normal表示
$('#div3').hide('slow');
$('#div4').hide('normal');
$('#div5').hide('fast');
//hide(速度,回调函数)
$('#div6').hide(3000,function(){alert("回调函数被执行！");});
});
//2. show()显示元素，相当于js中display:block
$('#btn2').click(function(){
$('#div1').show();
$('#div2').show(1000);
$('#div3').show('slow');
$('#div4').show('normal');
$('#div5').show('fast');
$('#div6').show(3000,function(){alert("回调函数被执行！");});
});
//3.toggle()实现hide()与show()之间的切换
$('#btn3').click(function(){
$('div').toggle(2000);
$('#btn1').toggle(2000,function(){alert("btn1切换");});
$('#btn2').toggle(2000,function(){alert("btn2切换");});
});
});
</script>
<style>
div{
width:200px;
height:200px;
background-color:red;
border:solid 2px #000000;
margin:2px;
float:left;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="隐藏方法hide()"><br>
<input type="button" id="btn2" value="显示方法show()"><br>
<input type="button" id="btn3" value="显示与隐藏方法之间的切换"><br>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>
</body>
</html>
效果图
