javascript - jQuery 不能使用 addClass

Question

我有两个 DIVS，为了简单起见，我将它们放在这里......

<div id="div1"></div>

<div id="maincontent" class="extra">

.... some content goes here...

</div>

这就是挑战，实际上它可能非常简单。

DIV1 由 JQuery .load 事件填充并首先显示。

然后 30 秒后，HTML 视频开始运行，JQuery .fadeOut 发生，然后 DIV maincontent 执行 .fadeIn 事件。

至少它“应该”是这样工作的。

这是JS代码。

$(function() {
    $("#maincontent").addClass("hidden");
    $("#div1").delay(35000).fadeOut("slow");
    $("#maincontent").delay(36500).fadeIn("slow");
    $("#maincontent").removeClass("hidden");
});

还有一个简单的.hidden 类:无:

但是，maincontent div 并没有隐藏，而是在 div1 隐藏的时候存在!

div1 很好地淡出，但 maincontent 一直存在。

这是 css 类:.extra

.extra {min-width:1000px;min-height:100%; height:auto !important; height:100%; margin: 0 auto 0px; overflow:hidden; position:relative; z-index:10; background: url(../images/bgwithTitle.png) center center no-repeat;}

因此，在我尝试将类 .hidden 添加到 maincontent div 之前，我可能需要先让 DOM 存在，对吗？

看，另一个问题是，如果我将 .hidden 添加到主要内容的 div 类，.extra 也不起作用。

Answer 1

这是因为功能没有按顺序运行。尝试将函数嵌套在前一个函数的回调中 -

$(function() {
    $("#div1").delay(35000).fadeOut("slow", function() {
        $("#maincontent").delay(36500).fadeIn("slow", function() {
            $(this).addClass('.extra'); // or we can add specific CSS properties
        });
    });
});

编辑:注意删除了 .hide() 和/或 .addClass('hidden')。使用 #maincontent { display: none; 在 CSS 中隐藏 #maincontent }