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>