代码在jsfiddle中有效，但在html文档中无效

Question

我是javascript的初学者，希望有人能帮我解决这个问题。我试图制作一个id为"move"的div，来回滑动。该代码在jsfiddle中有效，但当我将其放入html文档中时将不起作用。我尝试将顶部放在一个单独的js文件中，并仅使用代码的最后一行调用头中的变量：

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

这不起作用。然后我尝试将整个js脚本放入头部，但也没有成功。这是我的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中按原样获取代码，并将其放入头部或单独的js文件中。不确定这样做是否会导致脚本无法工作。感谢您的帮助。提前谢谢大家。

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

Answer 1

您想将代码放入任一中

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

或

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

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

Answer 2

您需要在代码$(document).ready(function(){ });，以便您的代码在页面加载后运行。

否则，代码将查找尚不存在的html。

$(document).ready(function(){
$(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);
});