Javascript JS通过应用.css使元素移动

我想通过应用.css（）使一个元素在arrow press上移动，但它根本不起作用，我不知道为什么。与JQ animate（）完全相同的代码可以完美地工作。你能解释一下为什么.css不起作用吗？我知道有更好的方法可以做到这一点，但我只是好奇为什么它不附加top属性

$(document).ready(function(){
    $('body').keydown(function() {
        if (event.which == 38)
        {
            $('div').animate({top:'-=10px'},'fast');
        }
        else if (event.which == 40)
        {
            $('div').animate({top:'+=10px'},'fast');
        }
        else if (event.which == 37)
        {
            $('div').animate({left:'-=10px'},'fast');
        }
        else if (event.which == 39)
        {
            $('div').animate({left:'+=10px'},'fast');
        }
    }); 
});

---

帖子里的代码是你真正的代码吗？因为您使用的是

事件

变量，但尚未为传递给

keydown

的函数定义任何参数。它需要是

$（'body'）。向下键（函数（事件）{

移动

div

需要空间才能移动，或者您可以使用

位置：绝对值

使用

.css（）

调整属性需要事先明确设置该属性，而

.animate（）

将调整元素的计算位置，而无需专门设置

在下面的代码片段中，我给出了

#movable

元素

top

和

left

属性，而另一个

元素没有它们应用于同时影响

，但请注意，只有带有

顶部
和
左侧
属性的
才会移动


$（文档）.ready（函数（）{
$（'body'）.keydown（函数（事件）{
if（event.which==38）
{
$（'div'）.css（{top:'-=10px'}）；
}
else if（event.which==40）
{
$（'div'）.css（{top:'+=10px'}）；
}
else if（event.which==37）
{
$（'div'）.css（{left:'-=10px'}）；
}
else if（event.which==39）
{
$（'div'）.css（{左：'+=10px'}）；
}
//添加以停止堆栈溢出滚动
event.preventDefault（）；
}); 
})；
div{
位置：相对位置；
}
/*明确设置可移动div的顶部和左侧*/
#可移动{
顶部：0px；
左：0px；
}

可移动
不可移动
如果您只是在使用
css（）
函数指定
top
或
left
值，目标元素必须具有能够接收此类样式的
position
属性，例如：
position:absolute
。谢谢，我在文档中没有看到必须事先设置top和left的任何地方。可能在IE-
事件中运行一个全局对象非常感谢，我错过了这次活动，但它也在Chrome中工作——正如James提到的，可能是因为它是全局的。我想知道这是否可以说是jQuery中的一个bug。
.css（）
和
.animate（）
的文档都说它们是根据“当前值”操作的，因此行为实际上应该是相同的。
使用.css（）调整属性需要事先显式>设置该属性，而.animate（）则需要将调整元素的计算位置，而无需特别设置。
感谢您的回答-这就是原因，我在官方文档中的任何地方都没有看到这一点。如果我设置了顶部和左侧属性，则代码正常工作。我没有复制/粘贴CSS，但元素的位置是相对的。谢谢大家！