我遇到了一个以前从未遇到过的奇怪问题。我已正确加载 jQuery，但我似乎无法让它执行任何操作。
我正在尝试使用 jQuery 快速淡入我网站初始包装器上的一系列文本元素。我的 JavaScript 在主页上正常运行，所以我认为这是我的 CSS 问题？
代码示例:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
有问题的叠加层...
<body>
<div id="wrapper">
<div id="overlay">
<h1 id="overlaytext1">Fade this in</h1>
<h1 id="overlaytext2">Then this</h1>
<h1 id="overlaytext3">then this</h1>
<h1 id="overlaytext4">then this.</h1>
<div id="overlaycontent">
<h1>Compelling paragraph.</h1>
<h1 id="overlaytext">Credit</h1>
</div>
</div>
<-- Main Page Content -->
</div>
</body>
我的 CSS
#overlay {
background-color: rgba(0,0,0,0.90);
position: fixed;
height: 100%;
width: 100%;
z-index:1;
}
#overlaycontent {
padding-top: 20%;
width: 50%;
color: #ffffff;
margin: auto;
text-align: center;
font-size: 26px;
letter-spacing: -1px;
}
#overlaytext {
margin-top: 20px;
font-size: 22px;
}
#overlaytext1 {
display: none;
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
margin-left: 5%;
margin-top: 5%;
}
#overlaytext2 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
right: 5%;
bottom: 5%;
}
#overlaytext3 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
margin-top: 10%;
margin-left: 1%;
}
#overlaytext4 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
right: 1%;
bottom: 15%;
}
effects.js 的内容
$(function() {
setTimeout(function() {
$('#overlaytext1').show();
}, 1000);
}};
对我来说，一切看起来都很好。我唯一能想到的是 z-index 或位置导致问题？
有什么想法吗？
最佳答案
这是一个使用 css 类的 fiddle 来隐藏您的覆盖文本和 javascript 以在彼此之后 1 秒显示它:https://jsfiddle.net/stevenng/0n52dajm/1/
CSS:
.hide {
display: none;
}
#overlay {
background-color: rgba(0,0,0,0.90);
position: fixed;
height: 100%;
width: 100%;
z-index:1;
}
#overlaycontent {
padding-top: 20%;
width: 50%;
color: #ffffff;
margin: auto;
text-align: center;
font-size: 26px;
letter-spacing: -1px;
}
#overlaytext {
margin-top: 20px;
font-size: 22px;
}
#overlaytext1 {
display: none;
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
margin-left: 5%;
margin-top: 5%;
}
#overlaytext2 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
right: 5%;
bottom: 5%;
}
#overlaytext3 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
margin-top: 10%;
margin-left: 1%;
}
#overlaytext4 {
position: fixed;
color: rgba(255,255,255,0.20);
font-family: 'Kaushan Script', cursive;
font-size: 40px;
right: 1%;
bottom: 15%;
}
HTML:
<div id="wrapper">
<div id="overlay">
<h1 id="overlaytext1" class="hide">Fade this in</h1>
<h1 id="overlaytext2" class="hide">Then this</h1>
<h1 id="overlaytext3" class="hide">then this</h1>
<h1 id="overlaytext4" class="hide">then this.</h1>
<div id="overlaycontent">
<h1>Compelling paragraph.</h1>
<h1 id="overlaytext">Credit</h1>
</div>
</div>
</div>
JS:
$(function(){
setTimeout(function(){ $('#overlaytext1').fadeIn('slow'); }, 1000);
setTimeout(function(){ $('#overlaytext2').fadeIn('slow'); }, 2000);
setTimeout(function(){ $('#overlaytext3').fadeIn('slow'); }, 3000);
});
关于javascript - jQuery 不适用于叠加层？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37223457/