1. 使用基本動畫函數
基本的動畫函數主要分為show，hide和toggle三個，都提供了無參數的版本，表示不適用動畫切換元素的顯示狀態：
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();提供了兩個參數的重載,因為回呼函數可以省略,所以可以像開篇實例中使用的, 傳入一個數值作為唯一參數,則會在參數規定的時間內以動畫效果顯示/隱藏元素:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");如果傳遞了200, 表示圖層會在200 毫秒內透過漸變的形式顯示出來. speed 參數可以使用三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000).
三個函數都可以傳入回呼函數callback,簽名如下:
function callback() { this; // dom element}在回呼函數中的this 是執行此函數的DOM 物件. 會在動畫結束時執行。
2. 使用toggle 函數
toggle函數是功能更強大的函數,可以切換元素的可見狀態.我們經常遇到需要使用toggle的情況.例如希望一段文字第一次點選顯示彈出層,第二次點選隱藏彈出層.
注意: toggle()這個方法在jQuery1.8 宣告過時，在jQuery1 .9 中已經移除；jQuery animation也有一個名為toggle的方法。哪一個被呼叫取決於傳遞的參數的設定。
我們將開篇實例稍作修改即可實現這個效果:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery - Start Animation</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() { //动画速度
var speed = 500; //绑定事件处理
$("#btnShow").click(function(event) { //取消事件冒泡
event.stopPropagation(); //设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //切换弹出层的显示状态
$("#divPop").toggle(speed);
}); //单击空白区域隐藏弹出层
$(document).click(function(event) {
$("#divPop").hide(speed)
}); //单击弹出层则自身隐藏
$("#divPop").click(function(event) {
$("#divPop").hide(speed)
});
}); </script></head><body>
<div>
<button id="btnShow">Display the text prompt</button>
</div>
<!-- 弹出层 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
<div style="text-align: center;">pop div</div>
</div>
</body>
</html>下一節