2009-08-11 5 views
2

タイマーのタイプに基づいてアイテムクラスまたはIDを変更することはできますか?それはちょっと-そこ-1に行くとすべて1500ms、1500msその後、後でちょっと-が-2 ..など。私はおそらくそれが通過しますどのように多くの間隔を制御できるようなもの...アイテムクラスのjqueryタイムド変更

  • ちょっと、そこ
  • ちょっと-が-1
  • ちょっと-が-2
  • ちょっと-が-3
  • (バック先頭に)ねえ、そこ
  • など

おかげ

+0

これは可能なはずですが、なぜ地球上でこれをやりたいのですか? –

答えて

4

プラグイン機能などはあなたがやりたいことができますよう:

jQuery.fn.rotateClasses = function(classes, interval, max) { 
    var currentRotation = 0; 
    var timer = null; 

    var rotateFn = (function() { 
      var currentClass = currentRotation % classes.length; 

     var previousClass = currentClass - 1; 
     if(previousClass == -1) previousClass = classes.length - 1; 

     this.addClass(classes[currentClass]).removeClass(classes[previousClass]); 

     currentRotation += 1; 

      if(max > 0 && currentRotation >= max) clearInterval(timer); 
    })(); 

    timer = setInterval(rotateFn, interval); 

    return this; 
}; 

その後、あなたは、単に以下を使用して、それを呼び出すことができます。

$('#mydiv').rotateClasses(["class1", "class2", "class3"], 1000, 20); 

は単にパラメータを変更あなたは欲しい。最初のパラメータは回転するクラスの配列で、2番目は回転する間隔、3番目は反復の最大回数です。 0に設定すると、ad-infinitumが繰り返し実行されます。

0

参照:

setTiemOut 
setInternal 

var pp = 0; 

jQuery("#id").html(jQuery("#id").html() + "<div>hey there"+(pp++)+"</div>"); 
3

私は要素のIDを変更することに対してお勧めします - ではなく、「フレーム1 /フレーム2 /フレーム3」のクラスのために行きます。

$(function() { 
    var $target = $("#hey-there"); 
    var classes = ['frame0', 'frame1', 'frame2', 'frame3']; 
    var current = 0; 

    setInterval(function() { 
    $target.removeClass(classes[current]); 
    current = (current+1)%classes.length; 
    $target.addClass(classes[current]); 
    }, 1500); // 1500 ms loop 
});