Biraz oynadım kodlarla umarım yardımcı olur...


<style type="text/css">
body {
 font:76% normal verdana,arial,tahoma;
}
h1, h2 {
 font-size:1em;
}
#fooObject {
 position:absolute;
 left:0px;
 top:8em;
 width:5em;
 line-height:3em;
 background:#99ccff;
 border:1px solid #003366;
 white-space:nowrap;
 padding:0.5em;
}
</style>
<script type="text/javascript">
var foo = null;
function doMoveLeft() {
          foo.style.left = parseInt(foo.style.left) -10 + 'px';
          startMove("left");
}
function doMoveRight() {
          foo.style.left = parseInt(foo.style.left) +10 + 'px';
          startMove("right");
}
function stopMove()
{
clearTimeout(t);
}

function startMove(yon){
  if(yon == "left")  t = setTimeout(doMoveLeft,20);
  if(yon == "right")  t = setTimeout(doMoveRight,20);

}
function init() {
  foo = document.getElementById('fooObject');
  foo.style.left = '0px';
  doMoveRight();
}
window.onload = init;
</script>
<h1>kaçan div</h1>
<div id="fooObject">
kaçkaç
</div>
<input type="button" onclick="startMove('right');" value="Yürrüü">
<input type="button" onclick="startMove('left');" value="Dön Geri">
<input type="button" onclick="stopMove();" value="Duuuur">