Question

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {           
        $(document).keydown(function () {
            alert("hello");
            $('div').animate({ left: '+=10px' }, 500);
        });
    });

</script>
<style type="text/css">
div
{
     height: 50px; width: 50px; background-color: Red;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

我想在每个按键上向右移动我的div，但由于某种原因，这不起作用。我收到了“hello”警告，因此动画声明中可能存在一些我无法弄清楚的小错误。

任何人都可以告诉我为什么这不起作用以及正确的方法吗？

提前致谢。：）

Answer 1

这是因为left / top / right / bottom属性仅适用于定位元素。

因此，您需要在div上使用position:relative / position:absolute，或者为margin-left设置动画。（取决于你想要的最终结果.. ）

来自the specs

9.3.2框偏移：“top”，“right”，“bottom”，“left”

如果某个元素的“位置”属性的值不是“ static ”，则会说明该元素的位置。定位元素生成定位框，根据四个属性布局：

Answer 2

DEMO

试试这段代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {           
        $(document).keydown(function () {
            alert("hello");
            $('#tomove').animate({ left: '+=10px' }, 500);
        });
    });

</script>
<style type="text/css">
div
{
     height: 50px; width: 50px; background-color: Red; position:absolute; top:0; left:0;
}
</style>
</head>
<body>

<div id="tomove"></div>

</body>
</html>

Answer 3

您必须在css上将位置设置为relative：

position: relative;

看一下这个fiddle。

Answer 4

解决方案： 你必须先用绝对或相对来定位它才能移动它。

像这样：

position: relative;
/* OR */
position: absolute;

jQuery动画不起作用

4 个答案: