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

Question

我一直在尝试在我的网页底部创建一个小框，当滚动时会展开/弹出，然后当鼠标离开时再次关闭。

我发现这个post带有jsfiddle.net的链接（我一直在努力），并创建了一些在JSFiddle上查看时完全符合我想要的东西。但是当我在网站上弹出它时，我无法运行它（我认为它可能与onLoad设置有关，但我真的不确定。）

这是我在JSFiddle中创建的：

的JavaScript

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

CSS

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

HTML

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

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

正如你可能猜到的那样，对于JavaScript来说，我是一个完全的新手所以我很肯定我做的不对。

有人可以告诉我如何保存JavaScript代码并将其链接到我的网页，这样它的工作方式与JSFiddle完全相同吗？

Answer 1

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

jsFiddle自动执行此过程以使您的代码更清晰。当您将代码放入自己的网站时，您需要自己完成。这很简单：您只需将代码放入a callback to the ready event on the document：

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

或者，快捷版本：

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

这些在语义上和功能上是等价的。