jquery動畫函數有哪幾種
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() | 隱藏被選元素 |
| queue() | 顯示被選元素的排隊函數 |
| show() | 顯示被選元素 |
| 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()
hide() 方法隱藏被選元素。
show()顯示被選元素
toggle()：hide() 和 show() 方法之間的切換
範例：隱藏或顯示 <p> 元素
<!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()方法之間的切換
範例：以滑動方式隱藏 <p> 元素
<!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()方法之間的切換
範例：使用淡入效果顯示 <p> 元素
<!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動畫函數有哪幾種的詳細內容，更多請關注TW511.COM其它相關文章！