javascript - 在页面加载时淡入 div

Question

大家好，这里有一些我有点困惑的代码。我希望在浏览器加载大约 4 秒后加载 #test 中的文本和内容。文本很好地淡入并按照我想要的方式移动，我应用了一些 jscript 使其在 4 秒后淡入，只是不确定为什么我无法让它工作。

还有没有办法让图像以与我所做的#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;
    }
}

Java

setTimeout(function(){
    $("#test").fadeIn(400);
}, 5000)// JavaScript Document

这是一个codepen版本http://codepen.io/anon/pen/RPJaJj .您可以看到 #test 正在执行正确的 2s 淡入淡出。但是当淡入之前应该有延迟时，它会立即加载。

Answer 1

更新，
好吧，它打扰了我，所以我进一步研究了它..

如果我正确理解这就是你想要做的，这将起作用。

JS fiddle : https://jsfiddle.net/r8dzvmgL/

将类“dnone”添加到您的#test div

 <div id="test" class="dnone">

将此添加到您的 Css:

.dnone {
  display: none;
}

Javascript 代码，删除显示:无； 2.5 秒后来自#test:

setTimeout(function(){
 document.getElementById("test").className = "";
}, 2500);

希望这就是您要找的..根据您的需要对其进行编辑。