jQuery Animate 基本動畫練習 – 動態按鈕

有參加過咱們飛肯設計學苑 JavaScript jQuery 程式設計入門班的同學,對於 jQuery 的 animate() 動畫指令應該做過很多的練習,還沒練熟的同學也可以再參考一下我們網站上的另一篇 jQuery animate() 基本使用方法的教學文章。

當我們使用滑鼠觸摸到一個物件的時候,在 jQuery 語法可以使用 $(this) 指令來讓這個物件做出 animate() 動畫效果,現在的這一篇教學範例,我們要再加上 next() 指定下一個兄弟物件,還有 prev() 指定前一個兄弟物件,就可以讓前後的兩個物件也一起同時做出 animate() 動畫的效果。

為了練習 jQuery 語法,所以我們把畫面設計的很簡單,如下圖:

JavaScript 程式設計  - jQuery Animate 基本動畫練習 - 動態按鈕 - FLY01

這個範例的 jQuery 語法,如下圖:

JavaScript 程式設計  - jQuery Animate 基本動畫練習 - 動態按鈕 - FLY02_thumb

語法說明:

第4行:以目前這個範例網頁 HTML 之內的 li 有 jQuery 所謂的兄弟結構,寫程式的時候比較容易快速做出多一些的效果,所以我們就選取了 $(“#MENU li”) 來用。

第5行:使用 $(this) 可以讓目前被滑鼠觸摸到的物件做出 animate() 動畫。

第6行:使用 $(this).next() 可以讓排在他下一個兄弟物件做出 animate() 動畫。

第7行:使用 $(this).prev() 可以讓排在他上一個兄弟物件做出 animate() 動畫。

 

對於 jQuery 的 animate() 動畫指令,還沒很練熟的同學也可以再參考一下我們網站上的另一篇 jQuery animate() 基本使用方法的教學文章。


本文作者:
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in JavaScript 程式設計 and tagged , , , , .

迴響已被關閉。