從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
[2] 從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
[3] 從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
[4] 從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
[5] 從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
一.摘要
本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案, 即使你會使用jQuery也能在閱讀中發現些許秘籍.
開發人員一直痛疼做動畫. 但是有了jQuery你會瞬間成為別人(那些不知道jQuery的人)眼里的動畫高手! 本文將介紹jQuery的動畫相關函數.原來做動畫如此簡單!
二.前言
本系列文章的實例都是針對某一個技術細節的, 因為我們要學習的是基礎知識, 雖然總有人希望要復雜一些的應用示例, 但是我想還是讓我們先把基礎打牢, 有了扎實的基礎憑借每個人的智慧一定能創造出更多更好的應用.
就在寫這篇文章的前幾天, 還有不止一個同事在為了"彈出層"效果而犯愁. 但是以后再面對這樣的功能看過本篇文章的每一個人都可以開心的微笑了. jQuery, make work easy !
三.從實例開始
做web程序經常要使用彈出層, 比如單擊文字或按鈕顯示一段提示文字等. 假設有如下需求:
- 單擊圖中的"顯示提示文字"按鈕, 在按鈕的下方顯示一個彈出層.
- 單擊任何空白區域或者彈出層,彈出層消失.
用原始javascript我們也完全可以完成這個工作. 有以下幾點注意事項:
1. 彈出層的位置需要動態計算. 因為觸發彈出事件的對象可能出現在頁面的任何位置, 比如截圖中的位置.
2. 為document綁定單擊是關閉彈出層的函數, 要使用多播委托, 否則可能沖掉其他人在document綁定的函數.
3. 為document綁定了關閉函數后, 需要在顯示函數中取消事件冒泡, 否則彈出層將顯示后立刻關閉.
用jQuery, 我們可以輕松地實現此實例:
<!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 type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script> <script type="text/javascript"> $(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").show(speed); }); //單擊空白區域隱藏彈出層 $(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>
除了實現了基本的顯示和隱藏功能, 現在顯示和隱藏彈出層是漸變動畫效果! jQuery的動畫函數如此簡單, 第一次我在項目中使用時帶給了我意外的驚喜. 曾經我一直為跨瀏覽器計算位置頭痛, 但是通過jQuery的offset()函數和height()函數, 可以精確的計算彈出層的位置. 這些函數是封裝好且跨瀏覽器的. 需要注意要在設置彈出層位置屬性的時候,加上"px", 否則在FireFox下容易出現問題.
jQuery的動畫函數主要分為三類:
- 基本動畫函數: 既有透明度漸變, 又有滑動效果. 是最常用的動畫效果函數.
- 滑動動畫函數: 僅使用滑動漸變效果.
- 淡入淡出動畫函數: 僅使用透明度漸變效果.
這三類動畫函數效果各不相同, 用法基本一致. 大家可以自己嘗試.
另外也許上面的三類函數效果都不是我們想要的, 那么jQuery也提供了自定義動畫函數, 將控制權放在我們手里讓我們自己定義動畫效果.
下面對三類內置動畫函數和自定義動畫函數分別講解.
留言列表
