1

次のコードがあります。

<div class="drawing1"></div>    
<button id="start">Begin</button>

ユーザーがボタンをクリックすると、DIV 要素に割り当てられたクラスが drawing1 から drawing5 に変更され、その間の各図面が通過します (合計 5 つの図面があります)。また、約 500 の delay() が必要です。私の最初の考えは次のとおりです。

$('div').delay(800).toggleClass('drawing1 drawing2');

これは機能しますが、残りの図面を追加しようとすると(トグルクラスとクラスの追加/削除を使用していくつかの方法を試しました)、最後の図面にジャンプするか、2番目の図面のみを実行します。

これを設定して、ある描画クラスから次の描画クラスに移動し、それぞれに遅延を適用して 1 つずつ通過できるようにするにはどうすればよいでしょうか。

4

2 に答える 2

3 
var i = 2; //Assumes drawing1 is already applied to the div
var nextDrawing = function(){
    $("div").removeClass()
            .addClass("drawing"+i);

    i = ((i + 1) % 5); //To cycle from 1 to 5
    i = i == 0 ? 5 : i;
}
$('#start').click(function(){
    setInterval(nextDrawing, 500);
});

トリックを行う必要があります。

編集：次の変更は、誰かがボタンを複数回クリックした場合に間隔をクリアするのに役立つ場合があります。

var i = 2; //Assumes drawing1 is already applied to the div
var nextDrawing = function(){
    $("div").removeClass()
            .addClass("drawing"+i);

    i = ((i + 1) % 5); //To cycle from 1 to 5
    i = i == 0 ? 5 : i;
}

var intervalID = undefined;
$('#start').click(function(){
    if( intervalID != undefined )
    {
        clearInterval(intervalID);
    }
    intervalID = setInterval(nextDrawing, 500);
});

これが実際の例です: http://jsfiddle.net/ajhuU/

于 2013-04-16T19:38:37.063 に答える
0 
var leMethod = function(){ // wrapping in a method localizes variables
  var max = 5;             // nr of drawings
  var activeIdx = 0;       // active drawing
  var timeout = 500;       // the time between changes
  var originalClass = 'some classes that are always there';

  setTimeout(function(){               // execute the method on timeout expiration
    var el = $('div');                 // get whatever element you wish to manage
    el.attr('class', originalClass);   // restore original class
    el.addClass('classNr'+activeIdx);  // add your cycle class
    activeIdx = (activeIdx+1) % max;   // update index
  }, timeout);
};

leMethod();
于 2013-04-16T19:37:37.700 に答える