Javascript 완벽 한 운동 애니메이션 프레임 워 크 실현

운동 구조의 실현 사고.
운동 은 사실 한 동안 top, bottom, left, right, width, height, opacity 의 값 을 바 꾸 고 목적지 에 도착 한 후에 멈 추 는 것 이다.
운동 프레임 워 크 의 실현 코드:

function getStyle(element, attr) {
	//IE  
	if (element.currentStyle) {
		return element.currentStyle[attr];
	} else {
		//  
		return getComputedStyle(element, false)[attr];
	}
}
function startMove(element, json, time,func) {
    var flag = true; //          .
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        for (var attr in json) {
            //1.       。
            var iCurrent = 0;
            if (attr === "opacity") { //       。
                iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100);
            } else { //    
                iCurrent = parseInt(getStyle(element, attr)); //      
            }
            //2.     ,      
            var iSpeed = (json[attr] - iCurrent) / 10; //(   -   )/    =  
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //    

            //3.       ，     
            if (iCurrent != json[attr]) {
                flag = false; //    
				if (attr === "opacity") { //     ，  
					element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE
					element.style.opacity = (iCurrent + iSpeed) / 100; //  
				} else { //  
					element.style[attr] = iCurrent + iSpeed + "px";
				}
			} 
            //4.     ，    
            if (flag) {
                clearInterval(element.timer);
                if (func) {
                    func();
                }
            }
        }
    }, time);
}

운동 프레임 의 각 인터페이스:
element: 운동 을 수행 해 야 할 대상
json: 어떤 운동 을 실행 합 니까? 예 를 들 어 {"width": "100"} 은 너비 가 100 으로 변 하 는 운동 입 니 다. 여러 개의 동시 운동 을 할 때 괄호 안에 사용 하고 분리 하 십시오.
time: 타이머, 애니메이션 실행 지속 시간
func: 리 셋 함수, 체인 운동 실행 가능
jQuery 를 사용 하면 쉽게 실현 할 수 있 습 니 다.
... 와 같다

<pre name="code" class="html">$(function(){
    $("         ").mouseenter(function(){
    $(this).animate({"top":"-25px","opacity":"0"},300,function(){//  25  ，     0
            $(this).animate({"top":"20px","opacity":"1"},200);//    20  ，     1
        })
    })
})；