1

我有以下代码：

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

当用户单击 Button 时，分配给 DIV 元素的类应该从绘图 1 变为绘图 5，穿过其间的每个绘图（总共有 5 个绘图）。它也应该有大约 500 的延迟（）。我的第一个想法是：

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

哪个有效，但是当我尝试添加其余图纸时（尝试使用切换类和添加/删除类的几种方法），它要么跳到最后一个，要么只跳到第二个。

我该如何设置它，这样我就可以从一个绘图课转到下一个绘图课，逐个逐一进行，并为每个绘图课应用延迟。

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 回答