初步認識jQuery動畫
jQuery動畫
做web程式常要使用彈出層, 例如點選文字或按鈕顯示一段提示文字等.? 假設(shè)有以下需求:?
點選圖中的"顯示提示文字"按鈕, 在按鈕的下方顯示一個彈出圖層.點選任何空白區(qū)域或彈出圖層,彈出圖層消失.
用原始javascript我們也完全可以完成這個工作.? 有以下幾點注意事項:
1. 彈出層的位置需要動態(tài)計算. 因為觸發(fā)彈出事件的對象可能出現(xiàn)在頁面的任何位置, 例如截圖中的位置.
2. 為document綁定單擊是關(guān)閉彈出層的函數(shù), 要使用多播委託, 否則可能衝掉其他人在document綁定的函數(shù).
3. 為document綁定了關(guān)閉函數(shù)後, 需要在顯示函數(shù)中取消事件冒泡, 否則彈出層將顯示後立刻關(guān)閉.
用jQuery, 我們可以輕鬆地實現(xiàn)此實例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>jQuery - Start Animation</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{ //動畫速度
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 }); //動畫顯示
$("#divPop").show(speed);
}); //單擊空白區(qū)域隱藏彈出層
$(document).click(function(event) { $("#divPop").hide(speed) }); //單擊彈出層則自身隱藏
$("#divPop").click(function(event) { $("#divPop").hide(speed) });
}); </script></head><body>
<div>
<br /><br /><br />
<button id="btnShow">顯示提示文字</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;">彈出層</div>
</div>
</body>
</html>除了實現(xiàn)了基本的顯示和隱藏功能,?現(xiàn)在顯示和隱藏彈出層是漸變動畫效果! jQuery的動畫函數(shù)如此簡單, 第一次我在專案中使用時帶給了我意外的驚喜. 曾經(jīng)我一直為跨瀏覽器計算位置頭痛, 但是通過jQuery的offset()函數(shù)和height()函數(shù), 可以精確的計算彈出層的位置. 這些函數(shù)是封裝好且跨瀏覽器的.? 需要注意要在設(shè)定彈出層位置屬性的時候,加上"px", 否則在FireFox下容易出現(xiàn)問題.
jQuery的動畫函數(shù)主要分為三類:
基本動畫函數(shù): 既有透明度漸變, 又有滑動效果. 是最常用的動畫效果函數(shù).滑動動畫函數(shù): 僅使用滑動漸變效果.淡入淡出動畫函數(shù): 僅使用透明度漸變效果.
這三類動畫函數(shù)效果各不相同, 用法基本一致. 大家可以自己嘗試.
另外也許上面的三類函數(shù)效果都不是我們想要的, 那麼jQuery也提供了自定義動畫函數(shù),?將控制權(quán)放在我們手裡讓我們自己定義動畫效果.
下面對三類內(nèi)置動畫函數(shù)與自訂動畫函數(shù)分別講解.?
