код работает в jsfiddle, но не в html документе

Question

Я начинаю с javascript и надеюсь, что кто-то поможет мне решить эту проблему. Я пытаюсь сделать div с id, «move», сползать назад и вперед. Код работает в 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); 

});