jquery - 代码可以在 jsfiddle 中运行，但不能在 html 文档中运行

Question

我是 javascript 的初学者，希望有人能帮助我解决这个问题。我正在尝试制作一个带有 id 的 div，“移动”，来回滑动。该代码在 jsfiddle 中工作，但当我将其放入 html 文档中时将无法工作。我尝试将顶部部分放在单独的 js 文件中，并仅使用代码的最后一行调用头部中的变量:

animateMe($('#move'), 2000);

那没有用。然后我尝试将整个 js 脚本放入 head 中，但这也不起作用。这是我的 html 文档头部的代码:

<script type="text/javascript" src="javascript/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
 $(targetElement).css({ left: '50px', top: '50px' }).animate({
        'left': '200px'  },{
       duration: speed,
        complete: function () {
            $(this).animate({
            'left':'50px'
            },{
            duration: speed,
            complete: function () {
         animateMe(this, speed);
                }
            })
        }
        }
   ); 
  };
animateMe($('#move'), 2000);</script>

这是正文中的代码。我通常使用外部 css 文档，但为了让事情变得更短，我在这里使用了内联 css。

<div id="move" style="position: absolute; width: 100px; height: 100px; background-color: green;"></div>

我从 jsfiddle 中获取代码并将其放入 head 或我单独的 js 文件中。不确定这样做是否会导致脚本无法工作。任何帮助表示赞赏。提前谢谢大家。

这是我在 jsfiddle 上的工作的链接:http://jsfiddle.net/wrdweaver6/r8Kf9/

Answer 1

您想将代码放入其中

$(document).ready(function() {
    // Your code here
});

或

window.onload = function() {
    // Your code here
};

在 JavaScript 执行之前，需要先加载所有元素。使用 jsFiddle 你不必这样做，但这可能是导致它无法在 jsFiddle 之外工作的原因。