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显示的类：none：

但是，maincontent div没有隐藏，而div1是！

div1很好地淡出，但主要内容是有时间的。

这是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

在CSS中隐藏#maincontent { display: none; }

Answer 2

jQuery是异步的，所以不等待延迟完成removeClass。您必须注册一个回调函数，该函数将在延迟和淡入/淡出后调用。

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

希望它对你有所帮助。

jQuery不能使用addClass

2 个答案: