코드는 jsfiddle에서 작동하지만 HTML 문서에서는 작동하지 않습니다.

Question

저는 초보자이며 다른 사람이이 문제를 해결할 수 있기를 바랍니다. 나는 이드와 함께 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 파일에 배치하고 있습니다. 이 작업을 수행하면 스크립트가 작동하지 않는 원인인지 확실하지 않습니다. 어떤 도움을 주셔서 감사합니다. 모두에게 미리 감사드립니다. 당신은

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

또는

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

요소의 모든

로드 할 필요하거나 내부에 코드를 삽입 할 http://jsfiddle.net/wrdweaver6/r8Kf9/

Answer 1

:

이

은 jsfiddle에 내 작품에 대한 링크입니다 먼저 자바 스크립트가 실행되기 전에. 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); 

});