這一個範例要讓同學來練習使用 jQuery 的 animate() 指令，設計製作動態滑動的按鈕，由於 jQuery 的 animate() 指令是借用 CSS 的語法來設定動畫效果，將原本靜態的網頁，變成具有動畫效果的呈現，所以在學習 jQuery 之前必須要先對 CSS 網頁排版熟悉，才能自由發揮出 jQuery 的各種動態功能，這是一個相當受現在網頁設計師愛用的功能。
以下的教學說明，就是按照以上所提到的觀念，在網頁在製作時，一開始先使用 CSS 語法把網頁排好，接下來再開始撰寫 jQuery 語法…
一：頁畫面繪製
先使用 Photoshop 把我們想要的網頁畫面繪製出來，如下圖：
二：Wireframe
拿一張 A4 的紙和一支鉛筆，把 HTML 網頁要用到的 div 結構，還有 <h1> 文字標題，超連結按鈕用到的 <ul><li> 標籤先畫出一個草稿圖， 如下：
三：寫HTML
新增一個 HTML 網頁，照著剛剛畫的草稿，把 HTML 標籤寫出來，如下圖：
四：寫CSS
再使用 CSS 語法把網頁的排版及相關畫面的設計寫好，如下圖：
五：排版完成
寫好 CSS 語法之後，看到的網頁初步畫面，如下圖：
六：調整CSS
為了要再搭配使用 jQuery 語法製作動態效果，之前，要修改一下 css 語法，把畫面做一些調整，如下圖：
第34行：先把 <li> 設定為 position:relative; 座標原點，給裡面的 <a> 超連結使用。
第35行：再 <li> 設定 overflow:hidden; 遮罩功能，等一下裡面的 <a> 寫座標超出 <li> 的範圍時，超連結圖片超出去的部份就會消失看不到。
第43行：為 <a> 超連結寫 position:absolute; 座標功能。
第44行：把 <a> 超連結的座標寫 –250px 圖片就會超出原本所在的 <li> 範圍
七：CSS調整後畫面
使用瀏覽器看一下，原本超連結的彩帶圖片超出去的部份就消失了，只剩下一點點局部還在。
八：新增JavaScript檔
如下圖，第25行，第26行，在 HTML 網頁的最下面，加上我們要用到的 jQuery 連結，第27行加上我們要寫的 javascript 連結。
九：寫jQuery程式
如下圖所示 jQuery 的語法，相當簡潔易用，很適合大部份的網頁設計師學習。
第8行：當滑鼠摸到超連結圖片時，座標就會 animate 動態滑動到 top:-5 的座標，就會看到彩帶圖片從上面滑下來的效果。
第9行：當滑鼠離開超連結圖片時，座標就會 animate 動態滑動到 top:-250 的座標，就會看到彩帶圖片滑回去消失的效果。
十：範例完成
完成後，再使用瀏覽器看一下，使用滑鼠去摸摸看，就可以看到超連結彩帶圖片滑動的效果。
本文作者：
姜智豪
老師
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
