問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]動畫賀聯式選單



[jQuery]動畫賀聯式選單
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106

上一次有介紹過「CSS 賀聯式選單」的效果,雖然純用 CSS 能完成這樣已經很不錯了,但如果還能加上更進階的動畫效果的話,那應該會更優吧!因此,現在要教各位如果使用 jQuery 來把賀聯式選單進行加強。


原來範例中的 HTML 部份不需要變動,而 CSS 部份則是要把觸發選單事件a:hover { } 拿掉或先註解起來就可以了:



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 來寫選單的觸發事件:



$(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();
    });
});

這邊只是用到簡單的 hover() 事件跟基本的 animate() 動畫效果,另外,瀏覽者可能會在 選單的部份移進移出的,為了讓動畫能馬上的呈現,所以要先使用 stop() 來停止未完成的動畫後再來執行。


最後的 foucs() 事件是為了避免當 A 連結被點擊或是選取時而產生虛線框,因此我們透過 blur() 的方式讓它再失去焦點。



現在使用 jQuery 來加上動畫效果後,讓我們來試著瀏覽看看效果囉


有沒有發現它跟純用 CSS 所寫出來的展現效果有所差異呢?!原本的是馬上就全部都顯現了,現在則是慢慢的展開,有沒有覺得比較有趣呢!


不過 jQuery 內建的進階動畫效果有限,為了讓選單能用更活潑的方式來展現,我們還可以搭配 jQuery Easing 套件來擴充動畫效果。jQuery Easing 已經內建了 30 多種不同的效果,各位可以一一試看看那個是符合自己的需求的,我這邊就用會產生"ㄉㄨㄞ ㄉㄨㄞ"動畫的 easeOutBounce 效果:



$(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();
    });
});

最後可以試試實際的效果反應,相信各位會喜歡這樣的選單效果的。


範例瀏覽:


http://demonstration.abgne.tw/jquery/0005/0005_1.html
http://demonstration.abgne.tw/jquery/0005/0005_2.html


以上內容於2009-06-06 09:31 發表在 http://abgne.tw/jquery/apply-jquery/jquery-animate-menu-1.html

2009/6/6 10:35
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS