我使用Bootstrap，Animate.css和Typed.js来构建网页。我想要的效果是页面为空白，nav使用animate.css fadeInDown向下滑动，完成Typed.js行开始书写以及完成雪佛龙时（由FontAwesome提供） ）使用animate.css bounceInUp制作动画。
我已经编写了以下代码，但所有内容都是立刻发生的，而且雪佛龙根本没有动画。
<body>
<!--NAV BAR SECITON-->
<nav class="navbar navbar-fixed-top">
<div class="container-fluid animated fadeInDown">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="companylogo.png" /></a>
<ul class="nav navbar-nav pull-right">
<li><h3><a href="#">Blog</a></h3></li>
</ul>
</div>
</div>
</nav>
<!-- Main page banner -->
<div class="jumbotron">
<div class="container text-center special">
<div class="centermaintextline vertical-center">
<div class="showAndTell">
<h1>
<span class="maintextline"></span>
</h1>
</div>
</div>
<div class="text-center bottom-box">
<h1><i class="fa fa-chevron-down"></i></h1>
</div>
</div>
</div>
<!--Script that should hide the section to be typed.js so the flashing cursor doesn't appear till ready-->
<!--Also hide the chevron-->
<script>
$(document).ready($('.showAndTell').hide());
$(document).ready($('.fa-chevron-down').hide());
</script>
<script src="typed.js" type="text/javascript"></script>
<!-- thanks http://www.mattboldt.com/ -->
<script>
/*This function will execute typed.js and then show the chevron and animate it-*/
function typingEffect()
{
$(".maintextline").typed({
strings: ["Stuff to be typed"],
typeSpeed: 100,
startDelay: 1000,
});
$('.fa-chevron-down').show();
$('.fa-chevron-down').add('animited infinite bounceInUp');
}
/*function that should show the block to be typed.js and then execute the function that will typed.js*/
function showTypingEffect()
{
$('.showAndTell').show();
typingEffect();
}
/*call the previous function to get things going after the navbar finishes animating*/
$(document).ready($('.container-fluid').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', showTypingEffect()));
</script>
</body>
CSS Stuff
/*********************************************************
* *
* Stuff that affects the first panel *
* *
*********************************************************/
/*Makes .jumbotron occupy the full window*/
.jumbotron
{
width: 100%;
height:100%;
padding-top: 0px;
padding-bottom: 0px;
}
.jumbotron .container
{
width:100%;
height:100%;
padding-left: 0px;
padding-right:0px;
}
/*Makes things center vertically in the page, funnily enough*/
.vertical-center
{
min-height: 85%; /* Fallback for vh unit */
min-height: 85vh; /* You might also want to use
'height' property instead.
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
}
.vertical-center
{
min-height: 85%; /* Fallback for browsers do NOT support vh unit */
min-height: 85vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
/* Remove the default bottom margin of .jumbotron */
.jumbotron .vertical-center
{
margin-bottom: 0;
}
/*Everything below here styles the text in the cetner of the page*/
.special
{
background: transparent;
color: #fff;
font-family: "ocr-a-std", san-serif;
text-transform: uppercase;
}
/*Make the main keyword underline */
.special a, .special a:hover, .special a:visited
{
text-decoration: underline;
color:#fff;
}
.bottom-box
{
bottom: 0;
margin-bottom: 50px;
position: absolute;
width:100%;
}
.fa-chevron-down
{
}
/*********************************************************
* *
* Stuff that affects the navigation bar *
* *
*********************************************************/
.nav
{
}
/*Style the top bar*/
.navbar-fixed-top, .navbar-fixed-top a, .navbar-fixed-top a:hover, .navbar-fixed-top a:visited, .navbar-fixed-top li
{
background-color: transparent;
border-color: transparent;
font-family: "futura-pt", sans-serif;
color: #fff;
font-size: 22px;
}
.navbar-fixed-top .navbrand
{
color: #fff;
}
.navbar-fixed-top
{
position: absolute;
}
.nav h4
{
margin-right: 0.3em;
}
/*********************************************************
* *
* Makes the cursor blink for the typed.js *
* *
*********************************************************/
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
答案 0 :(得分：1)
.ready（）方法通常与匿名函数一起使用。
示例：
<script>
$(document).ready(function(){
$('.showAndTell').hide();
$('.fa-chevron-down').hide();
$('.container-fluid').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', showTypingEffect);
});
</script>