Question

我有一个我从未经历过的奇怪问题。我正确加载了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或位置导致问题？

有什么想法吗？

Answer 1

这里有一个css类的小提琴，用于隐藏你的叠加文字和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);
});

Answer 2

让它发挥作用。几条评论。你错过了一个＆＃39;！＆＃39;于：

 </div>
<-- Main Page Content -->
</div>

您还需要为setTimeout函数指定正确的语法：

var timeOut = window.setTimeout(function() {
    $('#overlaytext1').show();
}, 1000);

或：

$(function() {
  setTimeout(function() {
    $('#overlaytext1').show();
  }, 1000);
});

（你错过了括号 - 你有一个括号）

工作小提琴：https://jsfiddle.net/dhqdt3vk/

jQuery没有处理叠加？

2 个答案: