javascript - 一对一运行jQuery函数以执行CSS转换

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

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

现在，我想在点击时建立以下事件链：（i）.content1逐渐消失，（ii）.intro获得display:none，.archive获得display:block，（iii）.content2逐渐消失。

相反，分别单击.content2：（i）.content2淡出，（ii）.archive获取display:none，.intro增益display:block，（iii）.content1淡入。

我对CSS有一定的经验，因此我进行并检查了CSS过渡的淡入，淡出效果。到目前为止，一切对我来说都是清楚的。

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

我没有在小提琴中附加脚本；我想问一下您是否可以为我指明正确的方向，而不是修改我的代码，因为您知道我不确定应该显示哪种解决方案-到目前为止，它们对我来说都一样无望。

我应该使用JavaScript吗？ jQuery的？纯CSS？您可以草绘/编写一些代码来解决问题吗？

您能否查看我想达到的效果的“显示/隐藏部分”的想法？

最佳答案

使用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