simple transicion

by jpeter06

HTML

<p>Click anywhere to move the ball</p>
<div id="foo"></div>

CSS

p{padding-left:60px;}
#foo{
border-radius:50px;
width:50px;
height:50px;
background:#cc0000;
position:absolute;
top:0;
left:0;
 
 -moz-transition: all 1s; 
-webkit-transition: all 1s;  
-ms-transition: all 1s;  
-o-transition: all 1s;  
transition: all 1s;  
}

JavaScript

var f = document.getElementById('foo');
function move(ev){
    ev = ev || window.event;
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';

}

if(!document.addEventListener)
    document.attachEvent("onclick",move);
else
    document.addEventListener("click",move,false);