代码在jsfiddle中工作，但不在html文档中

我是一个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/

---

你想把你的代码放在里面

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

要么

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

所有的元素都需要在JavaScript执行之前先加载。 用jsFiddle你不必这样做，但这可能是导致它不能在jsFiddle之外工作的原因。

---

你需要在你的代码$(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);

});

链接地址: http://www.djcxy.com/p/72087.html

上一篇: code works in jsfiddle but not in html document

下一篇: How to use jQuery Mobile for its touch event support only (no UI enhancements)?