利用JQuery動畫實現滑動菜單項效果的步驟及代碼

利用JQuery動畫實現滑動菜單項效果的步驟及代碼

　　效果：

　　點擊第二個菜單項后出現一個向上滑動的動畫，控制margin-top底部另一個div中的文字

　　上移從而替換掉原有的文字。

　　原理其實不難無非就是css的控制加之jquery的代碼

　　對docemnt中所有li綁定一個hover事件，事件中根據鼠標的狀態（無非是移入與移除），

　　使用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動畫實現滑動菜單項效果的步驟及代碼】相關文章：

關jQuery彈出窗口簡單實現代碼-javascript編程06-07

jquery提交按鈕的代碼07-28

關于jquery簡單圖片切換顯示效果實現方法介紹10-01

基于jQuery的固定表格頭部的代碼08-30

關于jQuery實現高亮顯示的方法介紹08-20

JavaScript實現網頁刷新代碼段08-07

將php實現過濾UBB代碼09-11

手繪效果圖步驟09-03

手繪效果圖技巧及步驟09-02

影視動畫的場景設計步驟07-03