Question
你好，我是 jQuery 的新手，所以虽然对某些人来说这听起来很愚蠢，但我真的不确定为什么这段代码不起作用。 My JSfiddle
它应该做什么的基本解释是:
通过单击开始按钮启动 << 这有效
显示先前隐藏的圆形 div，它是从 'border-radius: 100%' CSS 代码包含在下面。 << 这行得通
使 div 向上、向下、向左和向右移动<<这不起作用
这是我目前的问题。我已附上我包含在此任务中的所有 3 个文件。
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src = 'script.js'></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='runner'></div>
<div id='start'>START!</div>
</body>
</html>
CSS
body{
background-color: black;
}
#runner {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 100%;
position:relative
left: 0;
top: 0;;
}
#start{
background-color: red;
border-radius: 6px;
color: white;
font-family:arial black;
text-align: center;
font-size: 48px;
width:200px;
height:75px;
position: absolute;
top:50%;
left:50%;
margin: -100px 0 0 -32.5px;
text-align: center;
}
Javascript Code
var main = function()
{
var $runner = $('#runner');
var $start = $('#start');
// STARTUP
$runner.hide();
$start.mouseenter(function(){
$start.css('width', '210px');
$start.css('height', '80px');
});
$start.mouseleave(function(){
$start.css('width', '200px');
$start.css('height', '75px');
});
$start.click(function(){
$start.hide();
$runner.show();
$(document).keydown(function(key){
switch(parseInt(key.which,10)) {
// Left arrow key pressed
case 37:
$('#runner').animate({left: "-=10px"}, 1);
break;
// Up Arrow Pressed
case 38:
// Put our code here
$('#runner').animate({top: "-=10px"}, 1);
break;
// Right Arrow Pressed
case 39:
// Put our code here
$('#runner').animate({left: "+=10px"}, 1);
break;
// Down Arrow Pressed
case 40:
// Put our code here
$('#runner').animate({top: "+=10px"}, 1);
break;
}
})
});
// STARTUP FINISHED
// GAME
}
$(document).ready(main);
这是我的代码，我真的不确定为什么它不起作用。关于为什么不这样做有什么建议吗？
如果您认为您可能会发现问题或知道解决问题的替代方法，请回答您的想法。 我包含了一个仅显示输出的 JSfiddle 链接: My JSfiddle
谢谢。
最佳答案
您的 CSS 代码有错误。否则它工作正常:)
更正的 CSS:
#runner {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 100%;
position:relative;
left: 0;
top: 0;
}
关于javascript - 我的 jQuery 'KeyCode' 代码不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36597955/