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

效果:

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

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

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

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

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

使用animate的.動畫方式使原有的div向上移70px,移出時再將頁面效果變回原有的樣子。

代碼如下:

複製代碼 代碼如下:

$(function () {

var webNav = {

val: {

target: 0

},

init: function () {

$(" ul li")("hover", r);

},

hover: function (e) {

if ($(this)x() == et) { return };

if ( == "mouseenter") {

$(this)("a>p")(true, true)ate({ "margin-top": "-70px" }, 300);

} else if ( == "mouseleave") {

$(this)("a>p")(true, true)ate({ "margin-top": "0px" }, 300);

}

}

};

();

});