改变文本的颜色在定时间隔

jQuery: change text colour at timed intervals

本文关键字：定时间 颜色 文本 改变      更新时间：2023-09-26

我希望有人能帮我解决一个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从color: #000, font-weight: normal;color: #F00, font-weight: bold持续5秒，然后恢复正常;然后是。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>

使用你的文档的ready函数，你可以在这里阅读更多。

在ready函数中使用setTimeout函数。

相关文章：