<!--<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
</style>
</head>
<body>
<div style="position:absolute;left:0;top:0;width:50px;height:50px;background-color:blue;"></div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
var disX,
disY;
div.onmousedown=function(e){
disX=e.pageX-parseInt(div.style.left);
disY=e.pageY-parseInt(div.style.top);
document.onmousemove=function(e){
var event=e||window.event;
div.style.left=e.pageX-disX+"px";
div.style.top=e.pageY-disY+"px";
}
document.onmouseup=function(){
div.onmousemove=null;
}
}
</script>
</body>
</html>-->
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<style>
*{
margin:0px;
padding:0px;
}
div{
width:100px;
height:100px;
background-color:black;
left:0;
top:0;
position:absolute;
opacity:1;
}
</style>
<body>
<div></div>
<script>
var div=document.querySelector('div');
animate(div,{
width:200,
left:500,
opacity:20
});
function animate(el,properties){
clearInterval(el.timerId);
el.timerId=setInterval(function(){
for(var property in properties){
var current;
var target=properties[property];
if(property==='opacity'){
current=Math.round(parseFloat(getstyle(el,'opacity'))*100);
}else{
current=parseInt(getstyle(el,property));
}
var speed=(target-current)/30;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(property==='opacity'){
el.style.opacity=(current+speed)/100;
}else{
el.style[property]=current+speed+'px';
}
}
},20)
}
function getstyle(el,property){
if(getComputedStyle){
return getComputedStyle(el)[property]
}else{
return el.currentStyle[property];
}
}
</script>
</body>
</html>
