如何将jsfiddle.net的代码放入我的网站？

我一直试图在网页底部创build一个小框，当滚动时会展开/popup，然后在鼠标移开时再次closures。

我发现这个职位的链接jsfiddle.net（我一直在摆弄），并创build了一些工作完全一样，我想在JSFiddle查看时。但是当我在我的网站上popup时，我无法运行它（我认为这可能与onLoad设置有关，但是我不确定）。

这是我在JSFiddle中创build的：

 $('#box').hover(function() { $(this).animate({ height: '220px' }, 150); }, function() { $(this).animate({ height: '20px' }, 500); });

 #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; }

 <div id="box"></div>

这在JSFiddle中可以正常工作，但是当我尝试将代码插入到我的文件中并将它们链接在一起时不行。如果我将JSFiddle中的下拉框从onLoad或onDomReady为其他任何内容，它将停止工作，但代码不会更改。所以我想我不得不在其他地方添加别的东西。

正如你可能猜到的，当谈到JavaScript时，我是一个完全新手，所以我肯定我没有做正确的事情。

有人能告诉我如何保存JavaScript代码，并将其链接到我的网页，所以它会像JSFiddle一样工作？

您正在运行此代码，而不是等待DOM准备就绪。这意味着元素#box可能还不存在。

jsFiddle自动化这个过程，使你的代码更清洁。当您将代码放入您自己的网站时，您需要自己做。这非常简单：您只需将代码放入document ready事件的callback中ready ：

 $(document).ready(function() { // put your Javascript here });

或者，一个快捷版本：

 $(function(){ // put your Javascript here });

这些在语义上和function上是等同的。