<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
100px;
height: 100px;
background: red;
position: absolute;
left: 400px;
top: 100px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function() {
startMove(this, {
200,
height: 200
}, 10);
}
function startMove(obj, json, iSpeed) {
clearInterval(obj.iTimer);
var iCur = 0;
obj.iTimer = setInterval(function() {
var iBtn=true;
for(var attr in json) {
var iTarget = json[attr];
if(attr == "opacity") {
iCur = Math.round(css(obj, "opacity") * 100);
} else {
iCur = parseInt(css(obj, attr));
}
if(iCur != iTarget) {
iBtn=false;
if(attr == "opacity") {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if(iBtn){
clearInterval(obj.iTimer);
}
}, 30);
}
function css(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>