利用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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python异常处理操作实例详解
2018/05/10 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
python新手学习可变和不可变对象
2020/06/11 Python
文明美德伴我成长演讲稿
2014/05/12 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
2016新年致辞
2015/08/01 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL