4

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

我发现这篇文章带有指向 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 中可以正常工作，但当我尝试将代码插入我的文件并将它们链接在一起时却不行。onLoad如果我将 JSFiddle 中的下拉框更改onDomReady为其他任何内容，它会停止工作，但代码不会更改。所以我认为我必须为此添加其他内容。

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

有人可以告诉我如何保存 JavaScript 代码并将其链接到我的网页，以便它可以像在 JSFiddle 上一样工作吗？

4

1 回答 1

4

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

jsFiddle 自动执行此过程以使您的代码更清晰。当您将代码放入自己的网站时，您需要自己做。这很容易：您只需将代码放入事件的回调中readydocument：

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

或者，一个快捷版本：

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

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

于 2011-02-08T18:35:46.263 回答