使用Textillate.js（http://jschr.github.io/textillate/）并试图获得一个基本的动画，不知道为什么我的不工作，查看其他 SO 问题，我只是复制和粘贴只是为了看看如果它工作正常，但事实并非如此。我也确实在我的项目中添加了一个jquery.lettering.js和jquery.textillate.js文件（也是animate.css），但我想因为我只是从 github 复制和粘贴，所以我不需要在这里发布它。
HTML
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AIM II Spring 2014 - Jordan Max Assignment 5 © 2014 </title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="CSS/animate.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<script type="text/javascript">
$('.tlt').textillate({
in: {
shuffle: false,
sync: true
},
out: {
effect: 'fadeOutRightBig',
shuffle: false,
sync: true
},
loop: true
});
});
</script>
</head>
<body>
<h1><p> Writing 3... jQuery Remix!</p></h1>
<h2><a href="http://iam.colum.edu/students/jordan.max/algorerhythm/index.html"><p class="animated bounceInRight">Go Back to Portfolio »</p></a></h2>
<?php
// Each sponsor is an element of the $sponsors array:
$quotes = array(
array('Diegetic elements are objects within a media that only the user knows about in a video game for instance, a diegetic element would be the items you see on the side of the screen that inform you how much health or ammo you have remaining.','These are necessary components for they are needed to tell the player perhaps where to go for their next objective, or if any enemies are around you. Non-diegetic elements are items inside interactivity that are supposed to be there. '),
array('Some patterns being used in interactive media today include the majority of diegetic elements that would at one time be diegetic, but attempting to translate it into a non-diegetic element.','One of the biggest examples of great uses of non-diegetic elements is the way the players health is damaged. Older games will have a health bar, but more modern games will mostly have a “shock” state where the screen might turn red...'),
array('Does this mean we should stop using diegetic elements altogether? This is a question anyone in any form of interactive media should be asking themselves.','Websites are the same, and it would be logical and smart for developers to start thinking about how we can eliminate clutter, and turn it into a non-diegetic element for the user. ')
);
// Randomizing the order of sponsors:
shuffle($quotes);
?>
<div class="tlt">
<ul class="texts">
<li>Hello World!</li>
<li>I hate you</li>
</ul>
</div>
<nav id="main">
<figure class="sponsorListHolder">
<?php
// Looping through the array:
foreach($quotes as $FlipSide)
{
echo'
<div class="quote" title="Click to flip">
<div class="quoteFlip" >
<p>'.$FlipSide[0].'</p>
</div>
<div class="quoteData">
<div class="quoteDescription">
'.$FlipSide[1].'
</div>
</div>
</div>
';
}
?>
<aside class="clear"></aside>
</figure>
</nav>
<footer class="animated bounceInUp">
<p class="note"> © 2014. Jordan Max. Al Gore Rhythm Labs. </p>
</footer>
</body>
</html>
CSS
*{
/* Resetting the default styles of the page */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#B0F26D;
background-color:#6AAC2B;
font-family:Arial, Helvetica, sans-serif;
}
.quoteListHolder{
margin-bottom:30px;
}
.quote{
width:250px;
height:400px;
float:left;
margin:4px;
padding: 30px;
/*background-color: #F03C79;*/
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.quoteFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background: #36D8AA;
color:#EF6C9A;
font-family: 'PT Sans', sans-serif;
font-size: 2em;
}
.quoteFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.quoteFlip>p{
font-style:italic;
padding:50px 10px 20px 20px;
}
.quoteFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
/* Not being used right now
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
*/
}
.quoteData{
/* Hiding the .sponsorData div */
display:none;
}
.quoteDescription{
padding:50px 10px 20px 20px;
font-style:italic;
}
.clear{
/* This class clears the floats */
clear:both;
}
/* The styles below are only necessary for the styling of the demo page: */
#main{
position:relative;
margin:0 auto;
width:960px;
}
h1{
padding:30px 0;
text-align:center;
text-shadow:0 1px 1px black;
margin-bottom:30px;
background-color: #F03C79;
letter-spacing: 20px;
}
footer {
color: #F03C79;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;
position:absolute;
right:40px;
top:40px;
}
.note{
font-size:12px;
font-style:italic;
padding-bottom:20px;
text-align:center;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
color: lightgreen;
}
a img{
border:none;
}