利用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中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php中的常用魔术方法总结
2013/08/02 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
javascript中常用编程知识
2013/04/08 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
node跨域请求方法小结
2017/08/25 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python中format函数如何使用
2020/06/22 Python
网上书店创业计划书
2014/01/12 职场文书
三八妇女节慰问信
2015/02/14 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server