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，font-weight：normal;颜色：＃F00，font-weight：加粗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>

Answer 1

使用文档的就绪功能，您可以阅读有关here的更多信息。

在ready函数中使用setTimeout函数。您可以阅读更多相关信息here。

jQuery：以定时间隔更改文本颜色

1 个答案: