JS 简单的缓动效果
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Music Trival</title><script src="../jquery/jquery-1.7.1.js"></script> <script src="../jquery/myAnimation.js"></script><script type="text/javascript">var resultbg = null;var resultImg = null;var okbtn = null;var isHideResult = false;function loadUI() {resultbg = document.getElementById("resultbg");resultImg = document.getElementById("resultImg");okbtn = document.getElementById("ok");okbtn.addEventListener("mousedown", onMouseDown);resultbg.addEventListener("mousedown", onMouseDown1);}function onMouseDown() {//Animation.moveDirection(resultbg,'top',200,20,Tween.Linear,callback);setResultBtnEffect("run");}function onMouseDown1() {//Animation.moveDirection("resultbg",'top',-200,50,Tween.Linear);setResultBtnEffect("close");}function callback(){}function setResultBtnEffect(str) {var setIntervalID = 0;var setTimeoutID = 0;var count = 0;if(str == "run") {isHideResult = true;count = -200;setIntervalID = window.setInterval(runShow, 50);} else if(str == "close") {isHideResult = false;count = 200;setIntervalID = window.setInterval(runHide, 50);}function runShow() {count += 50;resultbg.style.top = count + "px";if(count >= (200)) {resultbg.style.top = "200px";clearInterval(setIntervalID);setTimeoutID = setTimeout(runBack, 2000);}}function runBack() {clearTimeout(setTimeoutID);if(isHideResult) {setIntervalID = setInterval(runHide, 50);onNextQuestion("noclick");isHideResult = false;}}function runHide() {count -= 50;resultbg.style.top = count + "px";if(count <= (-200)) {resultbg.style.top = "-200px";clearInterval(setIntervalID);}}}</script><style type="text/css" >.bg {background-color: #606;width: 320px;height: 480px;}.txt {position: relative;display: block;top: 130px;left: 70px;width: 180px;}.btn {position: relative;display: block;top: 350px;left: 95px;width: 120px;}.resultbg {position:absolute;display: block;z-index: 10;top: -200px;left: 80px;}</style></head><body onLoad="loadUI();"><div id="name"><button id="ok">OK</button> <article id="resultbg"><button id="resultImg" style="width:150px; height:80px" >Right</button></article></div></body></html>