jQuery基本動(dòng)畫函數(shù)
1. 使用基本動(dòng)畫函數(shù)
基本的動(dòng)畫函數(shù)主要分為show，hide和toggle三個(gè)，都提供了無參數(shù)的版本，表示不適用動(dòng)畫切換元素的顯示狀態(tài)：
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();提供了兩個(gè)參數(shù)的重載,因?yàn)榛卣{(diào)函數(shù)可以省略,所以可以像開篇實(shí)例中使用的, 傳入一個(gè)數(shù)值作為唯一參數(shù),則會(huì)在參數(shù)規(guī)定的時(shí)間內(nèi)用動(dòng)畫效果顯示/隱藏元素:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");如果傳遞了 200, 表示圖層會(huì)在 200 毫秒內(nèi)通過漸變的形式顯示出來. speed 參數(shù)可以使用三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000).
三個(gè)函數(shù)都可以傳入回調(diào)函數(shù)callback,簽名如下:
function callback() { this; // dom element}在回調(diào)函數(shù)中的 this 是執(zhí)行此函數(shù)的 DOM 對(duì)象. 會(huì)在動(dòng)畫結(jié)束時(shí)執(zhí)行。
2. 使用 toggle 函數(shù)
toggle函數(shù)是功能更強(qiáng)大的函數(shù),可以切換元素的可見狀態(tài).我們經(jīng)常遇到需要使用toggle的情況.比如希望一段文字第一次單擊顯示彈出層,第二次單擊隱藏彈出層.
注意:?toggle()這個(gè)方法在 jQuery1.8 中宣告過時(shí)，在 jQuery1.9 中已經(jīng)移除；jQuery?animation也有一個(gè)名為toggle的方法。哪一個(gè)被調(diào)用取決于傳遞的參數(shù)的設(shè)置。
我們將開篇實(shí)例稍作修改即可實(shí)現(xiàn)這個(gè)效果:
<!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() { //動(dòng)畫速度
var speed = 500; //綁定事件處理
$("#btnShow").click(function(event) { //取消事件冒泡
event.stopPropagation(); //設(shè)置彈出層位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //切換彈出層的顯示狀態(tài)
$("#divPop").toggle(speed);
}); //單擊空白區(qū)域隱藏彈出層
$(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> 
