Question

Here is my fiddle。我想实现一页全屏＆＃39;网页类型。我有两个部分;每个部分按display:block/none;一次显示一个内容;分别为.content1, .content2;内容div用作触发其他部分的按钮。您还可以看到固定的标题。

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

现在，我想在点击上构建以下事件链：（i）.content1淡出，（ii）.intro获取display:none，.archive获得{ {1}}，（iii）display:block淡入。

另一方面，点击.content2 :( i）.content2淡出，（ii）.content2得到.archive，display:none收益.intro，（iii）display:block淡入。

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

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

我不会在我的小提琴中附上剧本;我想问你是否可以指出我正确的方向，而不是修改我的代码，因为，你看，我不确定我应该展示哪种解决方案 - 到目前为止，它们对我来说都是无望的。

我应该使用JavaScript吗？ JQuery的？纯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

Answer 2

试试这个，它会自动执行您想要的操作并且它更清洁。

只需将show show放在您想要首先显示的页面容器上，然后单击next将遍历页面。

或者您可以自己设置页码，它会显示该页面。

<强> http://jsfiddle.net/ot2gyxme/

var pages = $('.full'),
    len = pages.length,
    showing = pages.index($('.full.show'));

$('.next').click(function(){
    pages.stop().eq(showing).fadeOut(function(){
        setTimeout(function(){
            showing = ++showing % len; //set this number to show x page
            pages.eq(showing).fadeIn();
        },1000); //time logo remains visible in ms.
    });

});

逐个运行jQuery函数来执行CSS转换

2 个答案: