用js模拟JQuery的show与hide动画函数代码


Posted in Javascript onSeptember 20, 2010
//根据ID返回dom元素 
var $ = function(id){return document.getElementById(id);} 
//返回dom元素的当前某css值 
var getCss = function(obj,name){ 
//ie 
if(obj.currentStyle) { 
return obj.currentStyle[name]; 
} 
//ff 
else { 
var style = document.defaultView.getComputedStyle(obj,null); 
return style[name]; 
} 
}

Hide函数:
var hide = function(obj,speed,fn){ 
obj = $(obj); if (!speed) { 
obj.style.display = 'none'; 
return; 
} 
else{ 
speed = speed==='fast'?20:speed==='normal'?30:50; 
obj.style.overflow = 'hidden'; 
} 
//获取dom的宽与高 
var oWidth = getCss(obj,'width'), oHeight = getCss(obj,'height'); 
//每次dom的递减数(等比例) 
var wcut = 10*(+oWidth.replace('px','') / +oHeight.replace('px','')),hcut = 10; 
//处理动画函数 
var process = function(width,height){ 
width = +width-wcut>0?+width-wcut:0; 
height = +height-hcut>0?+width-hcut:0; 
//判断是否减完了 
if(width !== 0 || height !== 0) { 
obj.style.width = width+'px'; 
obj.style.height = height+'px'; 
setTimeout(function(){process(width,height);},speed); 
} 
else { 
//减完后,设置属性为隐藏以及原本dom的宽与高 
obj.style.display = 'none'; 
obj.style.width = oWidth; 
obj.style.height = oHeight; 
if(fn)fn.call(obj); 
} 
} 
process(oWidth.replace('px',''),oHeight.replace('px','')); 
}

Show函数与Hide函数类似,只是思路相反而已
var show = function(obj,speed,fn){ obj = $(obj); 
if (!speed) { 
obj.style.display = 'block'; 
return; 
} 
else{ 
speed = speed==='fast'?20:speed==='normal'?30:50; 
obj.style.overflow = 'hidden'; 
} 
var oWidth = getCss(obj,'width').replace('px',''), oHeight = getCss(obj,'height').replace('px',''); 
var wadd = 10*(+oWidth / +oHeight),hadd = 10; 
obj.style.width = 0+'px'; 
obj.style.height = 0+'px'; 
obj.style.display = 'block'; 
var process = function(width,height){ 
width = +oWidth-width<wadd?+oWidth:wadd+width; 
height = +oHeight-height<hadd?oHeight:hadd+height; 
if(width !== +oWidth || height !== +oHeight) { 
obj.style.width = width+'px'; 
obj.style.height = height+'px'; 
setTimeout(function(){process(width,height);},speed); 
} 
else { 
obj.style.width = oWidth+'px'; 
obj.style.height = oHeight+'px'; 
if(fn)fn.call(obj); 
} 
} 
process(0,0); 
}

调用方式如:

hide('a','normal',function(){ 
show('a','normal'); 
});

呃。。。感觉写得好冗余,但不知要如何再优化,希望有高手能写个精简些的。。。

Javascript 相关文章推荐
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
javascript常用的方法分享
Jul 01 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
通过DOM脚本去设置样式信息
Sep 19 #Javascript
javscript对象原型的一些看法
Sep 19 #Javascript
Ext 今日学习总结
Sep 19 #Javascript
JS面向对象编程 for Cookie
Sep 19 #Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 #Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 #Javascript
jquery异步循环获取功能实现代码
Sep 19 #Javascript
You might like
5.PHP的其他功能
2006/10/09 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
laravel学习教程之关联模型
2016/07/30 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python递归函数定义与用法示例
2017/06/02 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python解析含有重复key的json方法
2019/01/22 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
服装采购员岗位职责
2014/03/15 职场文书
毕业评语大全
2014/05/04 职场文书
大学生求职信
2014/06/17 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android