jQuery：按时间间隔更改文本颜色

Question

我希望有人能帮我解决 jQuery 问题。我有一个网站，我希望文本块在页面加载时在定义的时间间隔内改变颜色。例如，在下面的代码中；

<div id="fade">


<div class="fade1">text block 1</div>
<div class="fade2">text block 2</div>
<div class="fade3">text block 3</div>

</div>

我希望 .fade1 从颜色更改为：#000，字体粗细：正常；颜色：#F00，字体粗细：加粗五秒然后恢复正常；接下来是 .fade2，然后是 .fade3 等。我希望这些效果在页面加载时发生，而不是由鼠标单击或悬停触发。

我对这种类型的编程相当陌生，并尝试使用 jQuery.Color() 和 .animate() 方法，但我似乎无法达到我想要的效果。 非常感谢任何帮助 - 谢谢。

**这是我第一次写这篇文章以来使用的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<div id="fade1">Text Block 1</div>
<div id="fade2">Text Block 2</div>
<div id="fade3">Text Block 3</div>


<script type="text/javascript">
var index = 0;
setInterval(highlightText, 3000);

function highlightText() {
      index = (index % 3) + 1;
      $('#fade' + index).css('color', '#e7008a').css('font-size', '110%');
      setTimeout(function() {
             $('#fade' + index).css('color', '#000').css('font-size', '100%');
      }, 2900);
}
</script>

Answer 1

使用文档的 Ready 功能，您可以在此处阅读更多相关信息。

在ready函数中使用setTimeout函数。您可以在此处了解更多相关信息。