javascript - jQueryでタイミングとシーケンスを正しく取得する方法

Question

3 つの電球があり、最初の電球を点灯させ、数ミリ秒間点灯させ、消灯し、次の電球を点灯して、同じ方法で続行するとします。

電球のオンとオフを切り替えるには、クラスを追加および削除します。どうすればこれを達成できますか?

PS質問を明確にするために電球を使用しました。基本的に必要なのは、divにクラスを追加する方法、しばらく保持する方法、クラスを削除する方法、クラスを別のdivに適用する方法、しばらく保持して削除する方法などです...

*編集の明確化: 電球の数は動的です

Answer 1

setInterval と jquery seelecors の単純な組み合わせを使用できます このフィドルを確認してくださいhttp://jsfiddle.net/aqXtL/1/

Answer 2

Javascript 関数 setInterval(code, interval) は、指定した間隔でコードを繰り返し実行します。カウンターで変数を保持し、jquery の addClass と removeClass を使用してライトのオンとオフを切り替えるだけです。

Answer 3

setTimeout(yourfuncname, 3000) == 3 秒待ってからその関数を実行するように setTimeoutを使用できます。アニメーションを使用する必要がある場合、jqueryanimateメソッドには完了したコールバックがパラメーターとして含まれています。

Answer 4

非常に単純化された例...

function startDimming(){
  setTimeout(_interval,function(){
    // Remove all "glowing" bulbs.
    // Add class to first "bulb".
    setTimeout(_interval,function(){
      // Remove all "glowing" bulbs.
      // Add class to second "bulb".
      setTimeout(_interval,function(){
        // Remove all "glowing" bulbs.
        // Add class to last "bulb".
        startDimming();
      });
    });
  });
}

Answer 5

jquery のアニメーションを使用し、完全な関数を使用して他のタスクを実行できます。

.animate( プロパティ [, 期間] [, イージング] [, 完了] )

   $('#clickme').クリック(関数() {
      $('#book').animate({
      不透明度: 0.25、
      左: '+=50',
    高さ: 'トグル'
    }、5000、関数（）{
          // ここでオブジェクトをアニメーション化し、アニメーションが完成したので、
          // ここで新しいアニメーションを開始できます
    });
  });

Answer 6

HTML :

<div class="bulb"> </div>
<div class="bulb"> </div>
<div class="bulb"> </div>

CSS:

.bulb {
    width: 50px;
    height: 100px;
    border: 2px #000 solid;
    float: left;
    margin: 10px;
}
.bulb.on {
    background: #ff0;
}

Jクエリ：

var timer;
function light ( i ) {
    i = i % $(".bulb").length;
    $(".bulb").eq(i).addClass("on").siblings().removeClass("on");
    timer = setTimeout(function(){
        light( ++i );
    }, 1000);
}
$(document).ready( function() {
    light(0);
});

編集：ここに実用的なサンプルがありますhttp://jsfiddle.net/QdWgM/