jquery動畫函數有17種：1、animate()，用於對被選元素套用自訂的動畫；2、hide()，用來隱藏被選元素；3、show()，用於顯示被選元素；4、fadeOut()，用於透過設定不透明度來隱藏元素；5、fadeTo()等等。
本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。
jquery動畫函數
下面的表格列出了所有用於建立動畫效果的 jQuery 方法。
| 方法 |
描述 |
| #animate() |
對被選元素套用"自訂"的動畫 |
| clearQueue() |
對被選元素移除所有排隊函數（仍未執行的） |
| delay() |
對所有被選元素的排隊函數（仍未執行）設定延遲 |
| dequeue() |
#移除下一個排隊函數，然後執行函數 |
| fadeIn() |
#逐漸改變被選元素的不透明度，從隱藏到可見 |
| fadeOut() |
逐漸改變被選元素的不透明度，從可見到隱藏 |
| fadeTo() |
把被選元素逐漸改變至給定的不透明度 |
| fadeToggle() |
在fadeIn() 和fadeOut() 方法之間進行切換 |
| #finish() |
對被選元素停止、移除並完成所有排隊動畫 |
| hide() |
#隱藏被選取元素 |
| #顯示被選元素 |
|
slideDown()
| 透過調整高度來滑動顯示被選元素 |
| ##slideToggle()
slideUp() 與slideDown() 方法之間的切換 |
| #slideUp()
透過調整高度來滑動隱藏被選取元素 |
| stop()
停止被選元素上目前正在運行的動畫 |
| toggle()
hide() 與show() 方法之間的切換 |
| #以下來介紹一些常用動畫函數。
1、animate()
animate() 方法執行 CSS 屬性集的自訂動畫。
該方法透過 CSS 樣式將元素從一個狀態改變為另一個狀態。 CSS屬性值是逐漸改變的，這樣就可以創造出動畫效果。
只有數字值可建立動畫（例如 "margin:30px"）。字串值無法建立動畫（例如 "background-color:red"）。
提示：請使用 " =" 或 "-=" 建立相對動畫。
範例：透過改變元素的高度，對元素套用動畫：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#box").animate({
height: "300px"
});
});
$("#btn2").click(function() {
$("#box").animate({
height: "100px"
});
});
});
</script>
</head>
<body>
<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>登入後複製
#2、hide()、show()和toggle( )
範例：隱藏或顯示
元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide();
});
$(".btn2").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>
</html>登入後複製
3、slideUp() 、slideDown()和slideToggle()
slideUp() 方法：以滑動方式隱藏被選元素。
slideDown() 方法：以滑動方式顯示被選取元素。
slideToggle() 方法：slideUp() 與slideDown()方法之間的切換
範例：以滑動方式隱藏<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideUp();
});
$(".btn2").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
</html>登入後複製
4、fadeIn() 、 fadeOut()和fadeToggle()
fadeIn () 方法逐漸改變被選元素的不透明度，從隱藏到可見（褪色效果）。
fadeOut() 方法逐漸改變被選元素的不透明度，從可見到隱藏（褪色效果）。
fadeToggle()：fadeIn() 與fadeOut()方法之間的切換
範例：使用淡入效果顯示
元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").fadeOut()
});
$(".btn2").click(function() {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
</html>登入後複製
5、fadeTo()
fadeTo() 方法逐漸改變被選元素的不透明度為指定的值（褪色效果）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").fadeTo(1000, 0.4);
});
});
</script>
</head>
<body>
<button>逐渐改变P元素的不透明度</button>
<p>这是一个段落。</p>
</body>
</html>登入後複製
.....
【推薦學習：jQuery影片教學、web前端視頻】
以上是jquery動畫函數有哪幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！
