Jquery 代码可以在JSFIDLE中工作，但不能在html文档中工作

我是javascript的初学者，希望有人能帮我解决这个问题。我试着用id“move”做一个俯冲，前后滑动。该代码在JSFIDLE中工作，但在我将其放入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>

$（targetElement）.css（{left:'50px'，top:'50px'}）。动画({
'左'：'200px'}{
持续时间：速度，
完成：函数（）{
$（此）。设置动画({
“左”：“50px”
},{
持续时间：速度，
完成：函数（）{
动画元素（这个，速度）；
}
})
}
}
); 
};
动画片（$（'move'），2000年）；

这是正文中的代码。我通常使用外部css文档，但为了尽量缩短文档，我在这里使用了内联css

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

我从JSFIDLE中获取代码，并将其放入head或单独的js文件中。不确定这样做是否是导致脚本无法工作的原因。感谢您的帮助。提前谢谢大家

---

这是我在JSFIDLE上的工作的链接：

您想将代码放入其中吗

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

或

---

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

您需要在代码

$（document）.ready（函数（）{

}）

因此您的代码在页面加载后运行

否则，代码将查找还不存在的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);

});

---

是的，您需要将其打包，以便在创建

DOM

后执行。谢谢大家！添加$（document）.ready call使其工作正常@布莱孔利，很高兴听到！请单击此处接受其中一个答案。

$(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);

});