原生JavaScript实现类似jQuery的show与hide动画效果

 
首先定义一个辅助函数，用于通过ID获取对应的DOM元素。
var $ = function(id){return document.getElementById(id);}
接着定义一个函数，用于获取DOM元素当前的特定CSS属性值。
var getCss = function(obj,name){
//针对IE浏览器的兼容处理
if(obj.currentStyle) {
return obj.currentStyle[name];
} 
//针对Firefox等标准浏览器的处理
else {
var style = document.defaultView.getComputedStyle(obj,null);
return style[name];
} 
} 

Hide函数实现

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函数实现

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');
}); 

代码逻辑较为冗长，目前尚未找到更优的简化方案，期待有经验的开发者能提供精简版本的实现。