1. 顯示動畫
以下面一個代碼示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery顯示動畫</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ff6700;
display: none;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
顯示動畫的方式有三種方式
方式一：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(".box").show();
</script>
解釋：使用show()， 不帶有參數， 表示讓指定的元素直接顯示出來。
其實這個方法的底層就是通過display：block;實現。
方式二：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//在3秒內逐漸顯示
$(".box").show(3000);
</script>
解釋： 使用show(數值)， 表示在一定時間之內， 逐漸顯示出來。
這種方法是通過控制元素的寬高、透明度、display屬性來說實現的。
方式三：
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function () { $(".box").show("slow"); }) </script>
解釋： 通過參數， 使用show(), 參數可以為：
(1) slow(慢)： 600ms;
(2) normal(普通)： 400ms；
(3) fast(快)： 200ms;
通過這種方式調用show()， 也是空過控制元素的寬高、透明度、display屬性來實現的。
補充：在動畫執行完畢后， 執行另外的程序
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$(".box").show("faster", function () {
alert("動畫執行完畢")
});
})
</script>
解釋： 這種方式， 是在show()中加入了一個函數， 當show()執行完畢后， 就會執行此函數。
可以在方式一、方式二、方式三中都可以加入此函數。
2. 隱藏動畫
示例代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuer隱藏動畫</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ff6700;
display: block;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
隱藏動畫 和 顯示動畫的方式相同， 都具有三種方式， 區別在於隱藏動畫使用hide()方法。
方式一：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box").hide();
})
</script>
解釋： 這種方式是通過hide()直接進行隱藏，hide()中沒有任何參數。
方式的底層是通過 display: none; 實現
方式二：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box").hide(3000);
})
</script>
解釋：使用 hide(數值) ， 表示在一定時間內， 逐漸隱藏。
這種方法是通過控制元素的寬高、透明度、display屬性來說實現的。
方式三：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box").hide("normal");
})
</script>
解釋： 通過參數， 使用 hide(), 參數可以為：
(1) slow(慢)： 600ms;
(2) normal(普通)： 400ms；
(3) fast(快)： 200ms;
通過這種方式調用 hide()， 也是空過控制元素的寬高、透明度、display屬性來實現的。
補充：在動畫執行完畢后， 執行另外的程序
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () { $(".box").hide("faster", function () { alert("動畫執行完畢") }); }) </script>
解釋： 這種方式， 是在 hide() 中加入了一個函數， 當 hide() 執行完畢后， 就會執行此函數。
可以在方式一、方式二、方式三中都可以加入此函數。
3. 顯示隱藏示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕控制圖片顯示隱藏</title>
<style>
#box{
width: 200px;
height: 200px;
display: none;
background-color: #ff6700;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">顯示</button>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
var is_show = true;
$("#btn").click(function () {
if (is_show){
$("#box").show(3000, function () {
$(this).text("盒子出來");
$("#btn").text("隱藏");
is_show = false;
})
}else{
$("#box").hide(3000, function () {
$(this).text("");
$("#btn").text("顯示");
is_show = true;
})
}
})
})
</script>
</body>
</html>
4. 便捷方式實現顯示隱藏動畫
可以功過 toggle() 便捷的實現顯示和隱藏的來回切換， 語法格式如下：
$("#box").toggle(3000, function () {
})
但是這種方法有一個不足之處， 那就是在執行時， 會先執行show()， 然后再執行hide()
使用 toggle() 的示例代碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕控制圖片顯示隱藏</title>
<style>
#box{
width: 200px;
height: 200px;
display: none;
background-color: #ff6700;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">顯示</button>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$("#box").toggle(3000, function () {
$(this).text("盒子顯示");
if($("#btn").text() == "隱藏"){
$("#btn").text("顯示");
}else{
$("#btn").text("隱藏");
}
})
})
})
</script>
</body>
</html>