Question

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

正如您可能会告诉我的那样，我对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>

JQUERY

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

CSS

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

先谢谢。

史蒂夫。

Answer 1

你的小提琴中的问题是你没有添加jQuery所以当你尝试用'$'引用它时，会抛出一个javascript错误。只需添加对jQuery库的引用，您的小提琴就可以在单击时淡出按钮。

Answer 2

第一个jQuery示例引发了一个错误：

$ is not defined

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

你会注意到在jsfiddle的左侧，你会看到在“Framewords＆amp; 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()略有不同）但它为你解决了这个问题在所有内容都已加载后执行JavaScript。你可以看到在我上面链接的小提琴的左侧，你会发现选择了“onLoad”的下拉列表。在其中，您还可以选择“OnDomready”（相当于$(document).ready()）

总结：

不要在jsFiddle中使用$(document).ready()。你不需要它。

DO 围绕javascript使用$(document).ready()，该javascript依赖于DOM已准备就绪（即“您的所有内容对您的JavaScript都可见”）。

Answer 3

你的问题：

1）将jQuery库添加到你的小提琴中。

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

3）使用它来淡出元素：

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

用javascript中的随机单词替换段落标记内容

3 个答案: