javascript - 一个一个地运行 jQuery 函数来执行 CSS 转换

Question

Here is my fiddle .我想实现“一页全屏”类型的网页。我有两个部分；通过display:block/none;一次显示一个，每个部分包含内容； .content1, .content2分别； content div 用作触发另一个部分的按钮。您还可以看到一个固定的 header 。

.intro 部分包含 .content1，.archive 部分包含 .content2。

现在，我想在点击时构建以下事件链:(i) .content1 淡出，(ii) .intro 得到 显示:无，.archive 获得display:block，(iii) .content2淡入。

反过来，分别点击 .content2:(i) .content2 淡出，(ii) .archive获取 display:none，.intro 获取 display:block，(iii) .content1淡入。

我有一些 CSS 经验，所以我制作并检查了 css 过渡以实现淡入淡出效果。到目前为止，一切对我来说都很清楚。

但是，我的问题是，我不知道如何构建事件链。我用谷歌搜索了很多类似的问题并尝试了一些解决方案，但没有运气。我对 JavaScript 的经验很少，因此在我尝试实现解决方案的过程中可能会出现一些明显的错误。

我没有在我的 fiddle 中附加脚本；我想问问您是否可以为我指明正确的方向而不是修复我的代码，因为，您看，我不确定我应该展示哪个解决方案——到目前为止，它们对我来说都同样没有希望。

我应该使用 JavaScript 吗？查询？纯 CSS？您能否草拟/编写一些代码来处理该问题？

您能否回顾一下我想要达到的效果的显示/隐藏部分的想法？

Answer 1

使用 jQuery 的 fadeIn 和 fadeOut 应该没问题:

 $(".toarchive").click(function(){
    $('.intro').fadeOut();
    $(".intro").removeClass("active");
    $(".intro").css("display", "none");
    $(".archive").fadeIn();
    $(".archive").css("display", "block");
    $(".archive").addClass("active");
}); 

但是，如果您担心淡入淡出之间的等待时间，可以使用setTimeout:

$(".toarchive").click(function(){
    $('.intro').fadeOut();
    $(".intro").removeClass("active");
    $(".intro").css("display", "none");
    setTimeout(testThis, 1000);
}); 

function testThis(){
    $(".archive").fadeIn();
    $(".archive").css("display", "block");
    $(".archive").addClass("active");
}

Try here