Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 利用JQuery动画制作滑动菜单项效果实现步骤及代码

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

发布时间:2013-11-09   编辑:www.jquerycn.cn
滑动菜单项效果,听起来就是很时尚的一个效果,不过实现起来有些麻烦,还好有本文的出现,可以帮助你解决这个困惑,热爱特效的你可不要错过了哈,好了话不多说切入正文

效果:



点击第二个菜单项后出现一个向上滑动的动画,控制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动画制作滑动菜单项效果实现步骤及代码
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
基于jquery实现后台左侧菜单点击上下滑动显示
Jquery 自定义动画概述及示例
jQuery弹性滑动导航菜单实现思路及代码
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
7款风格新颖的jQuery/CSS3菜单导航分享
jQuery中实现动画效果的基本操作介绍
jQuery 打造动态下滑菜单实现说明
在网站上应该用的30个jQuery插件整理

关键词: JQuery动画  滑动菜单   
[关闭]