|
Step3 - JavaScript代碼
首先要做的是，實現(xiàn)Step1中所說的，在DOM加載完成后修改其DOM結(jié)構(gòu)，具體做法如下：
// 把每個a中的內(nèi)容包含到一個層（span.out）中，
// 然后再在span.out層后面追加背景圖層（span.bg）
$("#menu li a").wrapInner( '<span class="out"></span>' )
.append( '<span class="bg"></span>' );
// 循環(huán)為菜單的a每個添加一個層（span.over）
$("#menu li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' )
.appendTo( this );
});
在講動畫代碼之前，先看一下動畫的過程，如下圖所示：
在Step1中我們知道DOM加載后，a元素中建立了幾個分隔層，在Step2中，CSS樣式中，我們設(shè)置了span.bg和span.over層的top屬性為-45px，因為span元素已設(shè)置為絕對定位，它將相對于li a 元素向上-45px，因為li元素內(nèi)容超出不可見，所以開始時，.bg層和.over層位于空間范圍外。
我們要設(shè)置的動畫過程是，當(dāng)鼠標(biāo)懸停時，三個層同時向下移動，span.out層向下移動至移除可見范圍，span.over和span.bg移動進(jìn)入可見區(qū)域，設(shè)置span.bg速度比span.over速度稍快，錯位產(chǎn)生更加效果。
要實現(xiàn)這樣動畫效果，使用jQuery的.animate()方法很容易就可以實現(xiàn)，以下是JS代碼和解釋：
$("#menu li a").hover(function() {
// 鼠標(biāo)懸停時候被觸發(fā)的函數(shù)
$(".out",this).stop().animate({'top':'45px'},250);//下滑至隱藏
$(".over",this).stop().animate({'top':'0px'},250); //下滑至顯示
$(".bg",this).stop().animate({'top':'0px'},120); //下滑至顯示
}, function() {
// 鼠標(biāo)移出時候被觸發(fā)的函數(shù)
$(".out",this).stop().animate({'top':'0px'},250); //上滑至顯示
$(".over",this).stop().animate({'top':'-45px'},250);//上滑至隱藏
$(".bg",this).stop().animate({'top':'-45px'},120);//上滑至隱藏
});
總結(jié)
以上講解了如何一步步打造jQuery動態(tài)下滑菜單，您可以按部就班自己實現(xiàn)一個，也可以下載源代碼修改定制，當(dāng)然，您有什么好的提議或者有什么問題，都可以給我留言。
本文地址：http://www.cnblogs.com/wiky/articles/animated-menu-0415.html
本文鏈接：http://www.95time.cn/tech/web/2010/7522.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 jQuery打造動態(tài)下滑菜單 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 jQuery打造動態(tài)下滑菜單 [2]
