Имеем код следующего вида:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body { margin:0; padding:0; }
#a {
position:absolute;
background:#0FF;
left:0;
height:300px;
width:120px;
}
input, #a {
margin:10px;
}
</style>
<script>
function foo() {
box = document.getElementById('a');
var computedStyle = box.currentStyle || window.getComputedStyle(box, null);
box.style.left = parseInt(computedStyle.left) + 10 + 'px';
setTimeout("foo()",20);
}
</script>
</head>
<body>
<input type="button" value="RUN, FORREST, RUN!" onClick="setTimeout('foo()',20)">
<div id="a"></div>
</body>
</html>
Как видите он простейшим образом анимирует движение объекта по экрану, но при этом у div'а искажается граница.
Никто не знает рецепт лекарства?