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.getCompulatedStyle(obj,null );
반환 스타일[이름];
}
}

숨기기 기능:

복사 code 코드는 다음과 같습니다.

var hide = function(obj,speed,fn){

obj = $(obj)

if (!speed) {
obj.style.display = 'none';
return;
}
else{
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 = ' 없음';
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 = '숨김' ;
}

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-height
if(width !== oWidth || height !== oHeight) {
obj.style.width = width 'px';
obj.style.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' ); });

아. . . 너무 중복된 것 같은데 어떻게 최적화해야 할지 모르겠네요. 누가 좀 더 간결하게 써주셨으면 좋겠습니다. . .