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

Question

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

我发现这篇帖子链接到 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 自动化了这个过程，让你的代码更干净。当您将代码放入自己的网站时，您需要自己完成。这非常简单：您只需将代码放入 对 ready 事件的回调中在文档上：

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

或者快捷方式版本：

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

它们在语义和功能上是等效的。