js を使用して JQuery のアニメーション関数の表示と非表示をシミュレートする code_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];
}
}

関数を隠す:

code コードは次のとおりです。

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 ||高さ !== 0) {
obj.style.width = 幅 'px';

setTimeout(function(){process(width) ,height);},speed);
}
else {
//縮小後、属性を hidden に設定し、元の dom の幅と高さを設定します
obj.style.display = 'なし';
obj.style.width = oWidth;
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 = 'ブロック'; 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 = 'ブロック';

var process = function(width,height){
width = oWidth-widthheight = oHeight-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' );
});

うーん。 。 。とても冗長な気がしますが、それを最適化する方法がわかりません。誰かがもっと簡潔なものを書いてくれることを願っています。 。 。