向javascript计时器添加淡入

在我的html正文中，我使用一个javascript，每5秒编写和更改一行ID为“moto”的div文本

var text=[“文本1”、“文本2”、“文本3”、“文本4”]；
var计数器=0；
var elem=document.getElementById（“moto”）；
ChangeFunction（）；
设置间隔（ChangeFunction，5000）；
函数ChangeFunction（）{
elem.innerHTML=文本[计数器]；
计数器++；
如果（计数器>=text.length）{counter=0；}
}

#moto{
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
过渡：所有1都易于输入输出；
}

---

您可以使用jquery轻松完成这项工作，如下所示

var text=[“文本1”、“文本2”、“文本3”、“文本4”]；
var计数器=0；
var elem=document.getElementById（“moto”）；
ChangeFunction（）；
设置间隔（ChangeFunction，5000）；
函数ChangeFunction（）{
var moto=文本[counter++]；
$（elem）.fadeOut（'slow'，function（）{
$（elem）.html（moto）；
$（elem）.fadeIn（'slow'）；
});
如果（计数器>=text.length）{counter=0；}
}

---

您可以使用jquery轻松完成这项工作，如下所示

var text=[“文本1”、“文本2”、“文本3”、“文本4”]；
var计数器=0；
var elem=document.getElementById（“moto”）；
ChangeFunction（）；
设置间隔（ChangeFunction，5000）；
函数ChangeFunction（）{
var moto=文本[counter++]；
$（elem）.fadeOut（'slow'，function（）{
$（elem）.html（moto）；
$（elem）.fadeIn（'slow'）；
});
如果（计数器>=text.length）{counter=0；}
}

---

您根本不需要JavaScript。下面是一个纯CSS实现：

@关键帧淡入淡出{
0% {
不透明度：1；
}
50%, 100% {
不透明度：0；
}
}
#摩托{
位置：相对位置；
}
#摩托分部{
位置：绝对位置；
排名：0；
左：0；
不透明度：0；
动画：淡入无限交替反转；
}
#莫托：第n个孩子（1）{
动画延迟：-2s；
}
#莫托：第n个孩子（2）{
动画延迟：0s；
}
#莫托：第n个孩子（3）{
动画延迟：2s；
}
#莫托：第n个孩子（4）{
动画延迟：4s；
}

文本1
文本2
文本3
文本4

您根本不需要JavaScript。下面是一个纯CSS实现：

@关键帧淡入淡出{
0% {
不透明度：1；
}
50%, 100% {
不透明度：0；
}
}
#摩托{
位置：相对位置；
}
#摩托分部{
位置：绝对位置；
排名：0；
左：0；
不透明度：0；
动画：淡入无限交替反转；
}
#莫托：第n个孩子（1）{
动画延迟：-2s；
}
#莫托：第n个孩子（2）{
动画延迟：0s；
}
#莫托：第n个孩子（3）{
动画延迟：2s；
}
#莫托：第n个孩子（4）{
动画延迟：4s；
}

文本1
文本2
文本3
文本4

您必须编写一个带有淡入和淡出样式的css类，然后在间隔中在元素上切换这些类。是的，您需要使用Javascript来实现这一点。如果您只是简单地更改

innerHTML

，就没有什么可以褪色的。首先淡出旧文本，然后放入新文本，然后淡入。（注意：尽管名称相似，Javascript与Java无关）您必须编写一个带有淡入和淡出样式的css类，然后在间隔中在元素上切换这些类。是的，您需要使用Javascript来实现这一点。如果您只是简单地更改

innerHTML

，就没有什么可以褪色的。首先淡出旧文本，然后放入新文本，然后淡入。（注意：尽管名称相似，Javascript与Java没有任何关系）这假设了预先存在的标记，而根据OP，该标记不存在（它们正在设置

innerHTML

）。但是消极的延迟@tmslnz如果没有预先存在的标记，CSS可以使用JavaScript生成。是的，但这样做会有点迂回，不是吗？@tmslnz可能会有点复杂，但性能会比更改

innerHTML

时更好@71GA 4s是动画的核心，0s是。这假设预先存在标记，根据OP，该标记不存在（他们正在设置

innerHTML

）。但是消极的延迟@tmslnz如果没有预先存在的标记，CSS可以使用JavaScript生成。是的，但这样做会有点迂回，不是吗？@tmslnz可能会有点复杂，但性能会比更改

innerHTML

时更好@71GA 4s是动画的核心，0s是。这在我的电脑上不适用。要让我的电脑使用此代码，需要先安装jquery吗？@71GA，你可以从CDN链接jquery，正如我上面提到的。只需将脚本标记放在

中，否则，您可以在本地下载它，并参考本地版本再问一个问题。页面加载文本在一段时间内不存在，然后开始呈现。发生这种情况时，文本下方的整个页面向下移动。有什么方法可以防止这种情况发生吗？因为方法

ChangeFunction（）在页面加载时被调用。您可以删除它，只需保留
setInterval（ChangeFunction，5000）仅此而已。这在我的电脑上不适用。要让我的电脑使用此代码，是否需要先安装jquery？@71GA，您可以如上所述从CDN链接jquery。只需将脚本标记放在
中，否则，您可以在本地下载它，并参考本地版本再问一个问题。页面加载文本在一段时间内不存在，然后开始呈现。发生这种情况时，文本下方的整个页面向下移动。有什么方法可以防止这种情况发生吗？因为方法
ChangeFunction（）在页面加载时被调用。您可以删除它，只需保留
setInterval（ChangeFunction，5000）仅此而已。