Question

hello I have an problem in my code when i click left word "ahmed" go to left 5 px when clicking again 5 px extra the problem is i need to click left in keyboard word move and continue moving until i let the key by the way imagine number 10 in web site i want to increase the 10 by clicking down when continue clicking the value will decrease

enter here and see my problem http://masry.host56.com/moving_object/index.php

Was it helpful?

Solution

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;
} );
});

http://jsfiddle.net/Imadbakir/5yShL/22/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top