我正在努力做到这里所说明的事情：http://jsfiddle.net/VB4QC/但是因为我不在我的舒适区域，所以没有拼写出的部分阻止我自己实施。具体来说，我需要知道Jquery包含的内容，如何插入Javascript以及如何调用它。让我告诉你我目前在猜什么。
在我的文件的头部，我补充说：
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
我有这个文件的本地副本，它有效 - 用其他元素测试，所以上面看起来很好。
对于JSFiddle网站上给出的Javascript，我添加了：
<script type="text/javascript">
.
.
.
</script>
因此，为了文字，我的页面正文包含：
<script type="text/javascript">
var terms = ["term 1", "term 2", "term 3"];
function rotateTerm() {
var ct = $("#rotate").data("term") || 0;
$("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
.delay(2000).fadeOut(200, rotateTerm);
}
$(rotateTerm);
</script>
最后我的猜测是用身体上载来调用它：
<body onload="rotateTerm()">
当然HTML正文包含：
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
所以我尽可能地密切关注这个例子（我认为）。会发生什么是页面呈现 这是一个句子，而且：第2项是更改 没有淡出或淡出，并且它没有显示这个＆＃39;，＆＃39;术语1＆＃39;或者＆＃39;术语3＆＃39;虽然看起来好像是第1和第3个术语。在一毫秒内轻弹过去。
我做错了什么？握在这里的一只手会走很长的路！
感谢您的期待！
答案 0 :(得分：4)
我不确定我是否正确理解了你的问题，但是如果你想要一个单独的文件，那就去吧：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var terms = ["term 1", "term 2", "term 3"];
function rotateTerm() {
var ct = $("#rotate").data("term") || 0;
$("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
.delay(2000).fadeOut(200, rotateTerm);
}
// Not needed anymore as the DOM is ready at this point
// $(rotateTerm);
// just call the function directly
rotateTerm();
</script>
</body>
</html>
我个人认为这个脚本完全不同，特别是数据存储是不必要的imho。 你需要解释代码吗？
答案 1 :(得分：3)
我写了一篇演练，解释了你的小提琴正在做什么：http://rodney.is/rotating/text/。由于SO对仅链接答案不满意，这里是一个快速解决方案。
在结束标记之前包含这样的jQuery。请注意，您正在使用jQuery 1.3.1，我包括jQuery 1.11.0。我建议你使用最新版本的jQuery，因为它会有更少的bug和更多功能：
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
在包含jQuery后立即包含脚本：
<script>
var terms = ["term 1", "term 2", "term 3"];
function rotateTerm() {
var ct = $("#rotate").data("term") || 0;
$("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
.delay(2000).fadeOut(200, rotateTerm);
}
$(rotateTerm);
</script>
您不需要<body onload> - 由于jQuery，脚本将尽快运行。
答案 2 :(得分：3)
Rodney Folz和nietonfir的答案都是正确的，因为两个答案都使用的jQuery版本高于您的问题（请参阅http://api.jquery.com/delay/）：
<!DOCTYPE html>
<html>
<head>
<!--
jQuery 1.4 is the MINIMUM version required to make this work.
This is because the .delay() method (used in rotateTerm() below)
was not added to jQuery until v1.4:
http://api.jquery.com/delay/
jQuery can be linked in the head element, or the body (genuinely doesn't matter)
provided it is linked prior to defining the other script (which uses jQuery).
-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
<!-- jQuery could also be linked here -->
<script>
var terms = ["term 1", "term 2", "term 3"];
function rotateTerm() {
var ct = $("#rotate").data("term") || 0; // get current term, defaulting to 0 if there is no current term
$("#rotate") // find element with id="rotate" (span)
.data("term", ct == terms.length - 1 ? 0 : ct + 1) //store next term, looping to the beginning of the array as necessary
.text(terms[ct]) // set the text of the span
.fadeIn() // fade the element in from full transparency
.delay(2000) // wait 2 seconds <-- this is the reason you must use jQuery 1.4 or higher
.fadeOut(200, rotateTerm); // fade the element out to full transparency and call this function again
}
$(rotateTerm); // odd syntactical construct explained below
/*
* Most often, jQuery is used after the DOM content has been loaded and parsed into a DOM tree.
* jQuery has a special contruct that greatly simplifies the syntax to catch the event.
* The two most popular forms are below:
$(document).ready(function () {
// do stuff when DOM content is loaded and parsed.
});
* or
$(function () {
// do stuff when DOM content is loaded and parsed.
});
* I have a strong tendency to use the former as I think it increases readability.
* What the above odd syntactical construct is doing is using the latter form, but it is
* substituting a named function (rotateTerm) for the anonymous function.
*/
</script>
</body>
</html>
答案 3 :(得分：1)
我用CSS Animation完成了它。你可以尝试这个替代方案。
<!DOCTYPE html>
<html>
<head>
<style>
#rotate{animation: fadeIn 2s infinite;}
@keyframes fadeIn{
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var terms = ["term 1", "term 2", "term 3"];
var count = 0;
function setText(){
$("#rotate").text(terms[count]);
count++;
if(count>=terms.length){
count=0;
}
}
var callFunction = setInterval(setText,2000);
setText();
});
</script>
</body>
</html>
答案 4 :(得分：0)
jQuery版本，效果与Frank Anderson一样。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var terms = ["term 1", "term 2", "term 3"];
var count = 0;
function setText(){
$("#rotate").text(terms[count]).animate({opacity: 0}, 1000, function() {
$(this).animate({opacity:1},1000);
setText();
});
count++;
if(count>=terms.length){
count=0;
}
}
setText();
});
</script>
</body>
</html>