jQuery+CSS實現的菜單效果

jQuery是繼prototype之後又一個優秀的Javascrīpt框架，至今已吸引了來自世界各地的眾多javascript高手加入其team。在頁面當中凡是涉及到前端事件和動畫效果的大多數都和jQuery有關。本篇博客做一個jQuery+CSS的小DEMO，來實現菜單的動畫效果。希望大家有所收獲。

這個DEMO需要准備的東西有5張圖片，和jQuery動畫效果擴展插件jQuery.easing.js1.3

下面寫這個例子的制作步驟：

1.     寫前端HTML代碼：

1. <ul>  
2.             <li class="green">  
3.                   <p><a href="#">主頁</a></p>  
4.                   <p class="subtext">首頁</p>  
5.             </li>  
6.             <li class="yellow">  
7.                   <p><a href="#">提高班</a></p>  
8.                   <p class="subtext">八期</p>  
9.             <p class="subtext">七期</p>  
10.             <p class="subtext">六期</p>  
11.             </li>  
12.             <li class="red">  
13.                   <p><a href="#">中國</a></p>  
14.                   <p class="subtext">北京</p>  
15.             </li>  
16.             <li class="blue">  
17.                   <p><a href="#">美國</a></p>  
18.                   <p class="subtext">紐約</p>  
19.             </li>  
20.             <li class="purple">  
21.                   <p><a href="#">澳大利亞</a></p>  
22.                   <p class="subtext">堪培拉</p>  
23.             </li>  
24.       </ul>