Question

我是javascript的初学者，我希望有人可以帮我解决这个问题。我试图用id做一个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文件中。不确定这样做是否会导致脚本无法正常工作。任何帮助表示赞赏。提前谢谢大家。

这是我在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);

});

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

2 个答案: