jQuery:時間間隔でテキストの色を変更する

誰かが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から変更したいと思います。色:#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>
1
おそらく通常のJavaScript setTimeout を使用しています。
追加された 著者 Dave Newton,
具体的に何が問題になっていますか? javascript/css/htmlの完全なサンプルは、より良い回答をより迅速に提供するのに役立ちます。
追加された 著者 hafichuk,
迅速な対応をありがとう。 setTimeoutメソッドを試してみましょう。私が望む結果を生み出すための私の以前の試みを得ることができなかったので、私はそれらを保持しなかったので、私は生産するための関連するサンプルがありません。
追加された 著者 Laura690,

1 答え

ドキュメントの準備機能を使用すると、その詳細について読むことができます。こちら

準備関数内でsetTimeout関数を使用します。あなたは、ここで詳しく読むことができます。

0
追加された
私は元の投稿にsetTimeout関数を含むコードをいくつか追加しました。それはうまくいくようですが、時々何かがうまくいかず、次のものが変わる前にテキストのブロックの1つが正常に戻らないことに気付きました。誰かがどんな光を放つことができるのだろうか?
追加された 著者 Laura690,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript