利用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);

}

}

};

();

});