效果： 点击第二个菜单项后出现一个向上滑动的动画，控制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 slideshow的一个小问题(如何发现及解决过程)

第一阶段，试用slideshow 在做一个网页homepage的时候，想用slideshow［1］做图片切换效果，其中js部分代码如下: 复制代码 代码如下: function next_slide() { 　　var $active = $('#bitware-overlay img.active'>>>详细阅读

本文标题：利用JQuery动画制作滑动菜单项效果实现步骤及代码

地址：http://www.17bianji.com/kaifa2/JS/22369.html

 1/2    1