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

Demo下载：http://www.cfxixi.com/showtopic-528.aspx