溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“jquery動畫函數有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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動畫函數有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
