上一次有介紹過「賀聯式選單」的效果,雖然純用 CSS 能完成這樣已經很不錯了,但如果還能加上更進階的動畫效果的話,那應該會更優吧!因此,現在要教各位如果使用 jQuery 來把賀聯式選單進行加強。
原來範例中的 HTML 部份不需要變動,而 CSS 部份則是要把觸發選單事件的 a:hover { } 給拿掉或先註解起來就可以了:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | ul { margin: 0; padding: 0; list-style: none; } ul li { float: left; } ul li a { width: 100px; height: 50px; display: block; line-height: 50px; overflow: hidden; text-align: center; text-decoration: none; color: #fff; } /* ul li a:hover { height: 150px; } */ ul li a div { color: #fff; line-height: 16px; font-weight: bold; margin-top: 73px; padding-top: 7px; border-top: 1px dotted #fff; } .t1{background: #08f2d6 url(01.gif);} .t2{background: #1209f1 url(02.gif);} .t3{background: #a202e2 url(03.gif);} .t4{background: #f4e603 url(04.gif);} .t5{background: #55df07 url(05.gif);} .t6{background: #02a8f3 url(06.gif);} .t7{background: #f6025e url(07.gif);} |
現在我們就要用 jQuery 來寫選單的觸發事件:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(function(){ // 幫 A 連結加上 hover() 事件 $("a").hover(function(){ // 當滑鼠移進時.. // 先停止未完成的動畫再進行新的動畫 // 展開完整的選項內容 $(this).stop().animate({ height: 150 }, 600); }, function(){ // 當滑鼠移出時.. // 先停止未完成的動畫再進行新的動畫 // 隱藏選項下方的內容 $(this).stop().animate({ height: 50 }, 600); }).focus(function(){ // 當 A 連結取得焦點時.. // 讓本身失去焦點 $(this).blur(); }); }); |
這邊只是用到簡單的 hover() 事件跟基本的 animate() 動畫效果,另外,瀏覽者可能會在選單的部份移進移出的,為了讓動畫能馬上的呈現,所以要先使用 stop() 來停止未完成的動畫後再來執行。
最後的 foucs() 事件是為了避免當 A 連結被點擊或是選取時而產生虛線框,因此我們透過 blur() 的方式讓它再失去焦點。
現在使用 jQuery 來加上動畫效果後,讓我們來試著瀏覽看看效果囉
有沒有發現它跟純用 CSS 所寫出來的展現效果有所差異呢?!原本的是馬上就全部都顯現了,現在則是慢慢的展開,有沒有覺得比較有趣呢!
不過 jQuery 內建的進階動畫效果有限,為了讓選單能用更活潑的方式來展現,我們還可以搭配 jQuery Easing 套件來擴充動畫效果。jQuery Easing 已經內建了 30 多種不同的效果,各位可以一一試看看那個是符合自己的需求的,我這邊就用會產生"ㄉㄨㄞ ㄉㄨㄞ"動畫的 easeOutBounce 效果:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(function(){ // 幫 A 連結加上 hover() 事件 $("a").hover(function(){ // 當滑鼠移進時.. // 先停止未完成的動畫再進行新的動畫 // 展開完整的選項內容 // 動畫效果加上 easeOutBounce $(this).stop().animate({ height: 150 }, 600, "easeOutBounce"); }, function(){ // 當滑鼠移出時.. // 先停止未完成的動畫再進行新的動畫 // 隱藏選項下方的內容 // 動畫效果加上 easeOutBounce $(this).stop().animate({ height: 50 }, 600, "easeOutBounce"); }).focus(function(){ // 當 A 連結取得焦點時.. // 讓本身失去焦點 $(this).blur(); }); }); |
最後可以試試實際的效果反應,相信各位會喜歡這樣的選單效果的。
不好意思 我用這個範例去製作選單的時候 發覺所有網站圖片都會因為$("a").hover(function() 這條程式碼出現縮小的效果耶... 有辦法能只限定選單那個部分就好嗎? 謝謝
你可以幫你的 ul 加個 id..然後用 $("#id a").hover()....
下載後 用火狐打開0005_2.html
沒有任何特效反應....
以上問題已經了解~ 不好意思打擾了
可否請教一下
該頁最上方的選單是否也是利用此原理完成(首頁/jQuery/JavaScript....)
或是有其他的範例可供參考嗎?
那只是一般的顯示及隱藏而已, 可以先從網頁原始碼中參考看看!