Jquery 如何实现淡入/淡出更改文本行？
我正试图做这里所说明的事情：但因为我不在我的舒适区内，没有详细说明的部分正在阻止我自己实现它。具体来说，我需要知道Jquery包含的内容是什么，如何插入Javascript，以及如何调用它。让我告诉你我现在在猜测什么 我在文件的开头加上：Jquery 如何实现淡入/淡出更改文本行？,jquery,html,Jquery,Html,我正试图做这里所说明的事情：但因为我不在我的舒适区内，没有详细说明的部分正在阻止我自己实现它。具体来说，我需要知道Jquery包含的内容是什么，如何插入Javascript，以及如何调用它。让我告诉你我现在在猜测什么 我在文件的开头加上： <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> 我有这个文件的本地副本，它可以与其他元素一起工作-测试，所以上面的内容看起来不错 在JSF
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<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>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
var术语=[“术语1”、“术语2”、“术语3”]；
函数旋转计（）{
var ct=$（“旋转”）。数据（“术语”）| 0；
$（“#旋转”）.data（“term”，ct==terms.length-1？0:ct+1）.text（terms[ct]）.fadeIn（）
延迟（2000）。衰减（200，旋转计）；
}
$（旋转计）；
<body onload="rotateTerm()">
<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>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
这里有一句话，这就是变化
谢谢你的期待 我不确定我是否正确理解了你的问题，但如果一份文件就是你想要的，那就这样吧：
<!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>
这里有一句话这是什么变化
var术语=[“术语1”、“术语2”、“术语3”]；
函数旋转计（）{
var ct=$（“旋转”）。数据（“术语”）| 0；
$（“#旋转”）.data（“term”，ct==terms.length-1？0:ct+1）.text（terms[ct]）.fadeIn（）
延迟（2000）。衰减（200，旋转计）；
}
//不再需要了，因为DOM已经准备好了
//$（旋转计）；
//直接调用函数即可
旋转计（）；
你需要解释一下代码吗？我写了一篇演练，解释了你的小提琴在做什么：。既然如此不赞成只链接的答案，这里有一个快速而肮脏的解决方案 像这样包括jQuery，就在结束标记之前。请注意，您使用的是jQuery1.3.1，其中包括jQuery1.11.0。我建议您尽可能使用最新版本的jQuery，因为它会有更少的bug和更多的功能：
<script src="//code.jquery.com/jquery-1.11.0.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);
}
$(rotateTerm);
</script>
var术语=[“术语1”、“术语2”、“术语3”]；
函数旋转计（）{
var ct=$（“旋转”）。数据（“术语”）| 0；
$（“#旋转”）.data（“term”，ct==terms.length-1？0:ct+1）.text（terms[ct]）.fadeIn（）
延迟（2000）。衰减（200，旋转计）；
}
$（旋转计）；
这里有一句话这是什么变化
var术语=[“术语1”、“术语2”、“术语3”]；
函数旋转计（）{
var ct=$（“#rotate”）.data（“term”）| | 0；//获取当前项，如果没有当前项，则默认为0
$（“#rotate”）//查找id=“rotate”（span）的元素
.data（“term”，ct==terms.length-1？0:ct+1）//存储下一个term，根据需要循环到数组的开头
.text（术语[ct]）//设置跨度的文本
.fadeIn（）//将元素从完全透明淡入
.delay（2000）//等待2秒我已经用CSS动画完成了。你可以试试这个
<!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>
#旋转{动画：fadeIn 2s无限；}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}
这里有一句话这是什么变化
$（文档）.ready（函数（）{
var术语=[“术语1”、“术语2”、“术语3”]；
var计数=0；
函数setText（）{
$（“#旋转”）.text（术语[计数]）；
计数++；
如果（计数>=术语长度）{
计数=0；
}
}
var callFunction=setInterval（setText，2000）；
setText（）；
});
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>
这里有一句话这是什么变化
$（文档）.ready（函数（）{
var术语=[“术语1”、“术语2”、“术语3”]；
var计数=0；
函数setText（）{
$（“#旋转”）.text（术语[count]）.animate（{opacity:0}，1000，function（）{
设置动画（{opacity:1}，1000）；
setText（）；
});
计数++；
如果（计数>=术语长度）{
计数=0；
}
}
setText（）；
});
您的函数在哪里