1

代码：

<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 向右移动，但由于某种原因，这不起作用。我收到“你好”警报，因此动画语句中可能存在一些我无法弄清楚的小错误。

谁能告诉我为什么这不起作用以及正确的方法？

提前致谢。:)

4

4 回答 4

4

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

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

从规格中引用

9.3.2 框偏移： ' top', ' right', ' bottom', ' left'

如果元素的“位置”属性的值不是“静态”，则称该元素已定位。定位元素生成定位框，根据四个属性进行布局：

于 2012-12-04T10:18:30.097 回答
0

演示

试试这个代码：

<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>
于 2012-12-04T10:14:04.583 回答
0

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

position: relative;

看看这个小提琴。

于 2012-12-04T10:22:38.670 回答
0

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

像这样：

position: relative;
/* OR */
position: absolute;
于 2015-01-24T13:51:56.003 回答