Here you're , I've been working on this fiddle for you:
<p id="move" style="position:absolute;left:0;top:0;">test</p>
JS:
$(document).ready(function(){
var element = $( "#move" )
, doc = $( document )
, Motion
, goRight = function(){
element.css( "left" ,1+ parseInt(element.css( "left")));
if ( Motion === goRight ) {
setTimeout( goRight , 10 );
}
}
goUp = function(){
element.css( "top" , parseInt(element.css( "top")) -1);
if ( Motion === goUp ) {
setTimeout( goUp , 10 );
}
}
goDown = function(){
element.css( "top" ,1+ parseInt(element.css( "top")));
if ( Motion === goDown ) {
setTimeout( goDown , 10 );
}
}
goleft = function(){
element.css( "left" ,parseInt(element.css( "left"))-1);
if ( Motion === goleft ) {
setTimeout( goleft , 10 );
}
};
doc.keydown( function( e ) {
if ( e.which === 39 && Motion !== goRight ) {
Motion = goRight;
goRight();
}
else if( e.which === 38 && Motion !== goUp){
Motion = goUp;
goUp();
}
else if( e.which === 37 && Motion !== goleft){
Motion = goleft;
goleft();
}
else if( e.which ===40 && Motion !== goDown){
Motion = goDown;
goDown();
}
} );
doc.keyup( function () {
Motion = null;
} );
});