- 相關推薦
利用JQuery動畫實現(xiàn)滑動菜單項效果的步驟及代碼
效果：
點擊第二個菜單項后出現(xiàn)一個向上滑動的動畫，控制margin-top底部另一個div中的文字
上移從而替換掉原有的文字。
原理其實不難無非就是css的控制加之jquery的代碼
對docemnt中所有l(wèi)i綁定一個hover事件，事件中根據(jù)鼠標的狀態(tài)（無非是移入與移除），
使用animate的動畫方式使原有的div向上移70px，移出時再將頁面效果變回原有的樣子。
代碼如下：
復制代碼 代碼如下:
$(function () {
var webNav = {
val: {
target: 0
},
init: function () {
$(".gnb ul li").on("hover", webNav.hover);
},
hover: function (e) {
if ($(this).index() == webNav.val.target) { return };
if (e.type == "mouseenter") {
$(this).find("a>p").stop(true, true).animate({ "margin-top": "-70px" }, 300);
} else if (e.type == "mouseleave") {
$(this).find("a>p").stop(true, true).animate({ "margin-top": "0px" }, 300);
}
}
};
webNav.init();
});
【利用JQuery動畫實現(xiàn)滑動菜單項效果的步驟及代碼】相關文章：
關jQuery彈出窗口簡單實現(xiàn)代碼-javascript編程06-07
jquery提交按鈕的代碼07-28
關于jquery簡單圖片切換顯示效果實現(xiàn)方法介紹10-01
基于jQuery的固定表格頭部的代碼08-30
關于jQuery實現(xiàn)高亮顯示的方法介紹08-20
JavaScript實現(xiàn)網(wǎng)頁刷新代碼段08-07
將php實現(xiàn)過濾UBB代碼09-11
手繪效果圖步驟09-03
手繪效果圖技巧及步驟09-02
影視動畫的場景設計步驟07-03