一、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{
width: 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>
//此情況是先執行函數，且只執行一次，然後執行動畫。