利用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 substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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中日期加减法运算实现代码
2011/12/08 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
jQuery 解析xml文件
2009/08/09 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
React组件生命周期详解
2017/07/03 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
搭建vue开发环境
2018/07/19 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python实现k-means聚类算法
2018/02/23 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
应聘美工求职信
2013/11/07 职场文书
人力资源专业推荐信
2013/11/29 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
村委会换届选举方案
2014/05/03 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
javascript数组includes、reduce的基本使用
2021/07/02 Javascript