用js模擬JQuery的show與hide動畫函數代碼_javascript技巧

代碼如下:
//根據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-widthheight = +oHeight-heightif(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');
});

呃。。感覺寫得好冗余，但不知要如何再優化，希望有高手能寫個精簡些的。。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com