jQuery - 我正在尝试将箭头键绑定到动态图片答案

【问题标题】：jQuery - I'm trying to bind arrow keys to a moving picturejQuery - 我正在尝试将箭头键绑定到动态图片
【发布时间】：2013-02-03 04:19:10
【问题描述】：

我需要使用箭头键在屏幕上移动火柴人图片。我似乎无法找到如何。我已经尝试了我发现的所有东西，但它仍然没有用。这是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 />

【问题讨论】：

标签： javascript jquery html binding

【解决方案1】：

认为您的代码可以正常工作。只有你错过了switch (keyCode) 中的括号代码。

您需要如何处理您的代码。你的一些代码可以被优化。

喜欢。

在调用 animate 方法之前始终使用 stop(true)。这会停止 animate 的队列。喜欢$(selector).stop(true).animate({});
为什么需要创建一个新的箭头对象。以防万一可以直接使用键码；
引用您的选择器，这样它就不会一直遍历获取元素。

见 jsfiddle：http://jsfiddle.net/bxAtd/

【讨论】：