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?您能否草拟/编写一些代码来处理该问题?
您能否回顾一下我想要达到的效果的显示/隐藏部分的想法?
最佳答案
使用 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");
}
关于javascript - 一个一个地运行 jQuery 函数来执行 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31123024/