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


Posted in Javascript onFebruary 07, 2013

效果:

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

点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字

上移从而替换掉原有的文字。

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

原理其实不难无非就是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(); 

});
Javascript 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
js实现可爱的气泡特效
Sep 05 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 #Javascript
extjs3 combobox取value和text案例详解
Feb 06 #Javascript
js汉字转拼音实现代码
Feb 06 #Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 #Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 #Javascript
js中top/parent/frame概述及案例应用
Feb 06 #Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 #Javascript
You might like
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
pytorch permute维度转换方法
2018/12/14 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python中如何设置代码自动提示
2020/07/15 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
经销商会议欢迎词
2014/01/11 职场文书
采购经理岗位职责
2014/02/16 职场文书
个人安全生产承诺书
2014/05/22 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
就业协议书怎么填
2014/09/15 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
信用卡收入证明范本
2015/06/12 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
python实现简单反弹球游戏
2021/04/12 Python
PHP实现两种排课方式
2021/06/26 PHP
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers