setTimeout函数无法正常工作

Question

嘿，我所有这段代码基本上都会在应用的div中消失。但由于某种原因，我无法让它正常工作。我能够让文字想要淡出超过2s，但我不能为我的生活让它在2s过后淡入（所以整体效果应该发生一旦页面加载后2s是什么即时瞄准这是一个具有略微不同的jquery的codepen版本，但仍然是同一个问题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淡入，以便在两秒钟后将此类应用于目标元素。

Answer 2

你正在做双动画，一个通过jquery的fadeIn，设置为在5秒后运行并运行400ms。和第二个动画通过CSS动画。但是因为css动画运行2秒并且和jquery一样运行，所以你不会看到jquery运行。

删除一个，Css动画或Jquery一个。

如果使用css，则将Css的时间从2s增加到5s。

否则只需删除你提供的所有Css就可以使jquery动画工作。

您可以使用css内置支持延迟

轻松延迟css动画

http://jsfiddle.net/zLayrwx9/

animation: fadeIn forwards 2s 4s;

这表示使用名为fadeIn的动画，将其延迟4秒，在2秒内完成，并在完成后保持最后状态。