使用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;
}
答案 0 :(得分：0)
看起来你有这个错字和额外的});
试试这个::
$(function(){
$('.tlt').textillate({ in : {
shuffle: false,
sync: true
},
out: {
effect: 'fadeOutRightBig',
shuffle: false,
sync: true
},
loop: true
});
});
或：
$(document).ready(function(){
$('.tlt').textillate({ in : {
shuffle: false,
sync: true
},
out: {
effect: 'fadeOutRightBig',
shuffle: false,
sync: true
},
loop: true
});
});
如果它仍然不起作用，根据他们的文档，它需要在一个匿名函数内，所以尝试在一个内部执行..
$(function () {});
或准备好文件：
也请解决这个问题;
<h1><p> Writing 3... jQuery Remix!</p></h1>
它应该是：
<h1>Writing 3... jQuery Remix!</h1>
不是一个有效的HTML标记，如果你想要一个H1出于搜索引擎优化的原因，只需给它一个类并使用css使它看起来像你想要的那样。