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

时间：2024-11-05 03:39:05 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();

　　});

【利用JQuery动画实现滑动菜单项效果的步骤及代码】相关文章：