jquery - setTimeout 函数无法正常工作

Question

嘿，我有这段代码，无论它应用于哪个 div，它基本上都会淡出。但出于某种原因，我无法让它正常工作。我能够让文本在 2 秒内淡入淡出，但我终生无法让它在 2 秒后淡入(所以总的来说，效果应该在 2 秒后页面加载后发生，这就是我的目标for. 这是一个 codepen 版本，jquery 略有不同，但问题仍然相同 http://codepen.io/anon/pen/RPJaJj

这里是 jquery:

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

然后这里是id div #test:

/*---------------------------- 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;
    }
}

我正在将它应用到这个 html:

===================================================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!-->
    <!--

希望你们能解开我的这个谜团! :) 射击!

Answer 1

您必须使用类和 JS 代码触发 CSS 淡入，以便在两秒后将此类应用于目标元素。