jQuery - 화살표 키를 움직이는 그림에 연결하려고합니다.

Question

화살표 키를 사용하여 stickman 그림을 화면 전체로 이동해야합니다. 방법을 찾을 수없는 것 같습니다. 나는 내가 찾은 모든 것을 시도했지만 여전히 효과가 없었다. 여기는 link입니다.

코드 :

<script> 
    $(document).ready(function(){ 
     $('#sitting').hide(); 
      $(document).keydown(function(e){ 
       var keyCode = e.keyCode || e.which, 
        arrow = { left:37, up:38, right: 39, down: 40 }; 
       switch (keyCode { 
       case arrow.left: 
        if(!$('#sitting').is(':visible')){ 
        $('#img,#sitting').animate({ 
         left:'-=60px' 
        },300,"linear"); 
        } 
       break; 
       case arrow.up: 
       break; 
       case arrow.right: 
        if(!$('#sitting').is(':visible')){ 
        $('#img,#sitting').animate({ 
         left:'+=60px' 
        },300,"linear"); 
        } 
       break; 
       case arrow.down: 
       break; 
       } 
      }); 
     $('#sit').click(function(){ 
      $('#img').fadeToggle(-100,function(){ 
       $('#sitting').fadeToggle(-100); 
      }); 
     }); 
    }); 
    </script> 
    <button id='left'><<</button><button id='right'>>></button><button id='sit'>Sit Down/Stand up</button><br /> 
    <img src='/jquery/sprites/spritePerson.png' id='img' style='position: absolute; margin-top: 375px;' /><img id='sitting' src='/jquery/sprites/spriteSitting.png' style='position: fixed; margin-top: 375px;'><img id='tree' src='/jquery/sprites/spriteTree.png' style='position: absolute; margin-top: 100px; margin-left: 700px;' /><br /> 

Answer 1

이 코드가 작동하는 생각. switch (keyCode)에 대괄호 부호가 누락되었습니다.

코드를 어떻게 다뤄야합니까? 일부 코드를 최적화 할 수 있습니다.

like.

1. 애니메이션 메서드를 호출하기 전에 항상 stop (true)을 사용하십시오. 그러면 애니메이션의 대기열이 중지됩니다. 처럼 $(selector).stop(true).animate({});

2. 왜 새 화살표를 만들어야합니까? 당신은 직접 키 코드를 사용할 수 있습니다;

3. 선택기에 대한 참조를 만들어 요소를 얻기 위해 항상 트래버스하지 않도록하십시오.

는 jsfiddle 참조 : http://jsfiddle.net/bxAtd/