jquery - 我正在尝试使用 keydown 为图像设置动画，但它不起作用

Question

我希望#character 向上、向下、向左或向右移动，具体取决于按下哪个箭头键。我无法弄清楚我的代码有什么问题。

$("#gamescreen").keydown(function(key) {
  switch(parseInt(key.which, 10)) {
    case 38:
      $("#character").animate({top: "-=10px"});
      break;
    case 40:
      $("#character").animate({top: "+=10px"});
      break;
    case 37:
      $("#character").animate({left: "-=10px"});
      break;
    case 39:
      $("#character").animate({right: "-=10px"});
      break;
    default:
      break;
  }
});

这可能并不重要，但 #character 实际上是一个包含四个图像的 div。所有图像的位置都设置为绝对位置。

Answer 1

div 需要具有gamescreen焦点才能捕获 keydown 事件。你有两个我能想到的选择：

1）添加tabindex="1"到gamescreen div中，使其可以获得焦点。

2）不是绑定到div的keydown事件，而是绑定到body的keydown事件。请参阅此jsFiddle 演示。