无法使用 jQuery animate() 使元素沿对角线移动答案

【问题标题】：Unable to make an element move diagonally with jQuery animate()无法使用 jQuery animate() 使元素沿对角线移动
【发布时间】：2012-10-22 10:26:19
【问题描述】：

好的，所以我只需要为我正在构建的网站上的几个动画学习 JQuery。

我一直在阅读 JQuery 网站上的教程，我只是想实现一个简单的对角线移动动画。

我对 JQuery 仍然非常陌生（就像今天开始的那样），但从我所了解的一切来看，以下代码应该可以工作。我犯了什么错误？

<head>
<script type="text/javascript" src="JQuery.js">
</script>

<script>
$(document).ready(function(){
    $("#moveme").click(function(event){
    $("#moveme").animate({right: '+=50', bottom: '+=50'}, 1000); 
    });
});
</script>
</head>

<body>
<div id="moveme">
Move this text
</div>
</body>

编辑：

添加了来自 css 的相对属性并修复了 document 的括号问题，但仍然无法正常工作。

【问题讨论】：

抱歉，不小心粘贴了错误的代码副本，有几个语法错误。更新版本现已发布。
你的问题标题应该反映问题。
@user1787489：为了将来参考，请注意编辑按钮可让您更改现有问题，这可能是您在阅读 Diodeus 的评论后应该做的事情
哦，我不知道你也可以编辑标题。好，谢谢！啊，你帮我编辑了，太好了。
我尝试了一些代码。在下面查看我的答案。

标签： javascript jquery html dom script-tag

【解决方案1】：

你在行中错过了 $(document)

$document.ready(function(){

【讨论】：

【解决方案2】：

您似乎忘记了正确选择元素的括号。

那又怎样？

$(document).ready(function(){
    $("#moveme").click(function(event){
        $(this).animate({right: '+=50', bottom: '+=50'}, 1000); 
    });
});

编辑：

另外，确保您正在导入 jQuery 脚本库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

【讨论】：

哦，文档也要加括号？所以我想每次你引用 dom 的元素时，它都必须是这样的？
@user1787489 嗯，奇怪.. 你确定你已经导入了 jQuery 吗？例如，请参阅我编辑的答案。

【解决方案3】：

还有您的 jquery animate 函数正在更改您的 id="moveme"

的 CSS

我会确保你的 CSS 中有这个。

#id {
    position: relative;
}

【讨论】：

【解决方案4】：

你绝对可以这样做：

$(document).ready(function(){
    $("#moveme").click(function(event){
      $(this).animate({'margin-left': '+=50', 'margin-top': '+=50'}, 1000); 
    });
});

在这里工作演示（只需点击 div 说“你好”）：http://jsfiddle.net/px2jz/

【讨论】：