Forum Moderators: open
I was wondering if anyone had any links or knows how to take my 'moving object' script and add tweening to it so it moves slower as it reaches it's target (or the end of it's movement).
any advice appreciated. cheers (code below)
<script type="text/javascript">
<!--
// global vars
dist = 100;
speed = dist/1.05;
function findPos() {
e = document.getElementById("element");
eTop = e.offsetTop;
eLeft = e.offsetLeft;
}
function left() {
findPos();
e.style.left = eLeft - (dist) + 'px';
return false;
}
function right() {
findPos();
e.style.left = eLeft + (dist) + 'px';
return false;
}
function down() {
findPos();
e.style.top = eTop + (dist) + 'px';
return false;
}
function up() {
findPos();
e.style.top = eTop - (dist) + 'px';
return false;
}
//-->
</script>
<style type="text/css">
* { padding: 0; margin: 0; }
#element {
background: red;
width: 50px;
height: 50px;
position: absolute;
}
#element p { font: bold 10px arial, san-serif; }
</style>
</head>
<body>
<a href="#" onclick="left();">Left</a>
<a href="#" onclick="right();">Right</a>
<a href="#" onclick="up();">Up</a>
<a href="#" onclick="down();">Down</a>
<div id="element"><p>move me</p></div>
</body>
</html>
