在页面加载时淡入div

Question

嘿，每个人都有一些代码，我有点困惑。我希望#test中的文本和内容在浏览器加载大约4秒后加载。文本很好地淡入并移动我想要的方式，我应用了一些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;
    }
}

的

的java

的

的

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

的

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

Answer 1

您可能错过了DOM ready：

$(document)
  .ready(function(){
    setTimeout(function(){
      $("#test").fadeIn(400);
    }, 5000);
  });

Answer 2

UPDATE，
好吧，它让我烦恼，所以我进一步深入了解它..

如果我正确理解这是你想做的事情，这将有效..

Js Fiddle： https://jsfiddle.net/r8dzvmgL/

添加课程＆＃34; dnone＆＃34;到你的#test div

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

将此添加到您的Css：

.dnone {
  display: none;
}

Javascript代码，删除display：none;来自#test的2.5秒后：

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

我希望你能找到的...... 根据您的需要编辑它。

Answer 3

jQuery delay()功能可能是您正在寻找的功能：

https://api.jquery.com/delay/

Answer 4

对于使CSS动画在4秒后启动的纯CSS解决方案，您可以使用animation-delay属性。

#test p {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
  /* Will delay the start of the animation for 4 seconds */
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}