用JQuery动画制作滑动菜单项效果的实现步骤及代码

效果：

单击第二个菜单项后，会出现一个向上滑动的动画，它控制页边距顶部底部另一个div中的文本向上移动并替换原始文本。

实际上，原理并不难，但是css的控制和jquery的代码将一个悬停事件绑定到docemnt中的所有li。在事件中，根据鼠标的状态(无非是移入和移出)，动画将原来的div上移70px，移出时页面效果变回原来的样子。代码如下：复制代码如下： $(function(){ var web nav={ val : { target : 0 }，init : function () {$(')。gnbulli ')。打开('悬停'，网络导航。悬停)；}，悬停：函数(e) { if ($(this)。index()==WebNav . val . target){ return }；if(e . type==' mouse enter '){ $(this)。查找(' ap ')。停止(真，真)。动画({ 'margin-top': '-70px' }，300)；} else if(e . type==' mouse leave '){ $(this)。查找(' ap ')。停止(真，真)。动画({ 'margin-top': '0px' }，300)；} } };webnav . init()；});