Question

代码：

Html：

<div id="Container" class="Container">
<div id="PLayer"  class="player" ></div>
</div>

的CSS：

<style type="text/css">
 .Container
 {
  width:200px;
   height:200px;
  }
 .player
{
 width:10px;
 height:10px;
 background-color:Red;
 position: absolute;
 }   
</style>

JS：

$("body").keydown(function (e) {

        var KeyID = e.KeyCode || e.which;
        if (KeyID === 39) //right 
        {
            $("#Player").animate({ 'right': '20px' });
        }
    });

但玩家似乎没有提出任何建议吗？

Answer 1

你应该让它从当前位置向右移动20px：

$(".Player").animate({ 'right': '+=20px' });

Answer 2

它可以工作，但使用类选择器。

$(".Player").animate({ 'right': '+=20px' });

如果您有多个具有播放器作为类值的div，则所有div都将移动。

Answer 3

您必须在ID上匹配案例。你有：

id="PLayer"

和

$("#Player")

更改大写＆＃34; L＆＃34;在元素的id为小写的情况下，它将起作用：http://jsfiddle.net/V27DZ/1/

...假设您在元素后面出现的脚本块中包含JavaScript代码，或者您已将其包装在文档就绪处理程序中。

另请注意，通过设置right属性的动画，您可以设置距离页面右侧边缘的距离。如果您打算将其移动到当前位置右侧的20px，请改为：

$("#Player").animate({ 'left': '+=20px' });

也就是说，将20px添加到当前左侧位置。也不会给它一个初始位置：http://jsfiddle.net/V27DZ/2/

最后，请注意，您不必测试e.keyCode，因为jQuery会为您标准e.which，但如果您做测试e.keyCode，请记住JS是个案敏感的，你需要一个小写的＆＃34; k＆＃34;。

使用箭头键将子div移动到右侧

3 个答案: