0

当用户进入页面时，我希望 div 位于中心并带有标题，下方的引号是从列表中随机挑选的，以及用于进入站点的按钮。这一切都很好，但我似乎无法让按钮淡入主站点并淡出登陆 div。这是一个 jsfiddle 尝试帮助解释更多事情。

JSFIDDLE

正如您可能会说的那样，我对 JavaScript 或 jquery 的使用不是很好，到目前为止我所做的只是学习零碎的东西并通过代码示例在网上冲浪

我不明白为什么它不起作用，因为我在 jsfiddle 中使用了我想要做的简化版本并且它起作用了。

简化版

下面的代码是简化版本（它不会让我不添加代码就发布？）

HTML

<div class="landingDiv">
    <h1>LANDING DIV</h1>
    <button id="showMain">Enter Site</button>
</div>

<div class="main">
    <h1>Main Site</h1>
</div>

查询

$("#showMain").click(function () {
    $(".main").fadeIn(1000);
    $(".landingDiv").fadeOut(1000);
});

CSS

.main {
display: none;
opactiy: 0;
}

先谢谢了。

史蒂夫。

4

3 回答 3

0

您的小提琴中的问题是您没有添加 jQuery，因此当您尝试使用“$”引用它时，会引发 javascript 错误。只需添加对 jQuery 库的引用，您的小提琴就会在单击时淡出按钮。

于 2013-05-15T02:09:24.480 回答
0

第一个 jQuery 示例抛出了一个错误：

$ is not defined

意思是没有定义/包含 jQuery。事实并非如此。但是在第二个 jsFiddle 中，您包含了 jQuery。

您会注意到在 jsfiddle 的左侧，您会看到在“Framewords & Extensions”标题下您可以包含一个 Framewordk - 所以，包含 jQuery！

这是包含 jQuery 的更新小提琴：http: //jsfiddle.net/6cGHF/1/

随着您的 JavaScript 开发向前发展，当发生意外情况时，检查您的浏览器开发工具是否有错误总是一个好主意。它总是可以帮助您，当您在 StackOverflow 上提问时，提供这些错误可以帮助我们！:)

Chrome 中开发人员工具的快捷方式是 F12 - 如果出现错误，您会看到一个带有 X 的小红圈 - 单击它以获取更多信息。但是开发者工具也可以在其他主流浏览器中使用（除了 IE8 及以下）。

编辑：

click()将您的事件函数包装在$(document).ready()

$(document).ready(function() {
    $("#showMain").click(function () {
        $(".main").fadeIn(1000);
        $(".landingDiv").fadeOut(1000);
    });
});

发生的事情是您的 HTML 文件是从上到下读取的。所以它会在元素被读取click之前达到你的功能。#showMain所以，jQuery 找不到它。

这在 jsFiddle 中不是问题的原因是因为所有 JavaScript 代码都包装在一个“onLoad”函数中（诚然，这与$(document).ready().已加载。您可以在我上面链接的小提琴的左侧看到，您会发现一个下拉菜单，其中选择了“onLoad”。在其中，您还可以选择“OnDomready”（相当于$(document).ready()）

总之：

  • 不要$(document).ready()在 jsFiddle 中使用。你不需要它。
  • 一定要使用$(document).ready()依赖于 DOM 已准备好这一事实的 JavaScript（即“你的所有内容对你的 JavaScript 可见”）。
于 2013-05-15T02:09:37.717 回答
0

你的问题：

1) 将 jQuery 库添加到您的小提琴中。

2)opacity:0;从 CSS 中的 .main 中删除。display:none;就足够了。

3）使用它来淡出/淡入元素：

$("#showMain").click(function () {
    $(".landingDiv").fadeOut(1000, function () {
        $(".main").fadeIn(1000);
    })
});
于 2013-05-15T02:19:47.193 回答