代碼在jsfiddle中工作，但不在html文檔中

Question

我是一名JavaScript初學者，希望有人能幫助我解決這個問題。我正在嘗試使用ID作爲分隔符，「移動」，來回滑動。該代碼在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你不必這樣做，但這可能是導致它不能在jsFiddle之外工作的原因。

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

});