jQuery不适用于覆盖？

-1

我有一个奇怪的问题，我从来没有经历过。我有jQuery正确加载，但我似乎无法让它做任何事情。jQuery不适用于覆盖？

我想使用jQuery快速淡入一系列文本元素在我的网站初始包装。我的JavaScript正在主页上运行，所以我认为这是我的CSS的问题？

代码示例：effects.js的

<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%; 
}

内容

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

对我来说，一切看起来都不错。我能想到的唯一的东西是z-index或位置导致问题的东西吗？

有什么想法？

来源

2016-05-14 Nick Tirrell

我们如何获得效果和main.js？ –

下面是使用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); 
});

来源

2016-05-14 06:41:58 Steve

得到它的工作。几点意见。你错过了'！'在：

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

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

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

或：

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

（你失踪的括号 - 你有一个大括号）

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

来源

2016-05-14 06:50:41

jQuery不适用于覆盖？

回答

相关问题