嘿，每个人都在这里有些混乱的代码。我希望浏览器加载约4秒后才能加载#test中的文本和内容。文本淡入淡出并随心所欲地移动，我应用了一些jscript使其在4s后淡入，只是不确定为什么我无法使其正常工作。
还有没有一种方法可以使图像褪色，就像我执行#test一样？
病态链接相关代码
的HTML
<!--===================================================Fader===================================================!-->
<div class="fadewrapper">
<div class="fader">
<img class="bottom" src="images/dsas.png"/>
<img class="top" src="images/dsa.png"/>
</div>
</div>
<!--===================================================Content===================================================!-->
<div class="contentwrap">
<div class="textwrap">
<div id="test">
<div class="contentspace">
</div><!--close contentspace!-->
<div class="content">
<p class="headertxt">Specializations</p>
<p>With various skills in branding, multi-media
and advertising I am able to provide fresh and inspiring solutions
for the task given to me. Using various programs such as:</p>
<p><img src="images/1436419348_Photoshop.png"/><img src="images/1436419350_Illustrator.png" /><img src="images/1436419354_Dreamweaver.png" /><img src= "images/1436419357_Premiere_Pro.png" /><img src="images/1436419359_After_Effects.png" /><img src="images/1436419356_Flash_Pro.png" /></p>
</div><!--close content!-->
<div class="divider">
<img src="images/divide.png"/>
</div><!--close divider!-->
<div class="content2">
<p class="headertxt">Why me?</p>
<p>The work I create is reflecting something
fresh and exciting in order to meet the clients
needs. About pushing for new and innovative ideas
and pushing for an end result of brand and product growth</p>
</div><!--close content2!-->
<div class="contentspace">
</div><!--close contentspace!-->
</div><!--close test!-->
</div><!--close textwrap!-->
</div><!--close contentwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div><!--close footerwrap!-->
</div><!--close wrapper!-->
<script src="scripts/onopen.js"></script>
</body>
</html>
的CSS
/*---------------------------- Content ----------------------------*/
#test p {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
from {
margin-top:-5px;
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
爪哇
setTimeout(function(){
$("#test").fadeIn(400);
}, 5000)// JavaScript Document
这是Codepen版本http://codepen.io/anon/pen/RPJaJj。您可以看到#test正在执行正确的2s衰减。但是，在淡入之前应该有延迟的情况下，它会立即加载。
更新，
好的，它困扰了我，所以我进一步研究了它。
如果我正确理解这就是您要执行的操作，那么它将起作用。
Js Fiddle：https :
//jsfiddle.net/r8dzvmgL/将类“ dnone”添加到您的#test div中
<div id="test" class="dnone">
将此添加到您的CSS：
.dnone {
display: none;
}
Javascript代码，删除display：none; 在2.5秒后从#test中获取：
setTimeout(function(){
document.getElementById("test").className = "";
}, 2500);
我希望这就是您想要的。根据您的需要对其进行编辑。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句