有參加過咱們飛肯設計學苑 JavaScript jQuery 程式設計入門班的同學，對於 jQuery 的 animate() 動畫指令應該做過很多的練習，還沒練熟的同學也可以再參考一下我們網站上的另一篇 jQuery animate() 基本使用方法的教學文章。
當我們使用滑鼠觸摸到一個物件的時候，在 jQuery 語法可以使用 $(this) 指令來讓這個物件做出 animate() 動畫效果，現在的這一篇教學範例，我們要再加上 next() 指定下一個兄弟物件，還有 prev() 指定前一個兄弟物件，就可以讓前後的兩個物件也一起同時做出 animate() 動畫的效果。
為了練習 jQuery 語法，所以我們把畫面設計的很簡單，如下圖：
這個範例的 jQuery 語法，如下圖：
語法說明：
第4行：以目前這個範例網頁 HTML 之內的 li 有 jQuery 所謂的兄弟結構，寫程式的時候比較容易快速做出多一些的效果，所以我們就選取了 $(“#MENU li”) 來用。
第5行：使用 $(this) 可以讓目前被滑鼠觸摸到的物件做出 animate() 動畫。
第6行：使用 $(this).next() 可以讓排在他下一個兄弟物件做出 animate() 動畫。
第7行：使用 $(this).prev() 可以讓排在他上一個兄弟物件做出 animate() 動畫。
對於 jQuery 的 animate() 動畫指令，還沒很練熟的同學也可以再參考一下我們網站上的另一篇 jQuery animate() 基本使用方法的教學文章。
本文作者：
姜智豪
老師
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
