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不適用於覆蓋？

回答

相關問題