javascript - JavaScript for 循环中的 jQuery 不起作用

Question

我试图在这样的 for 循环中运行 jQuery:

var frameNumber = 15; // How many frames are in your animation

for(var i = 1; i < frameNumber + 1; i++){
    var flipDelay = i * 100;

    $('.flipbook').delay(flipDelay).addClass('flipbook-' + i);
}

我正在尝试获得与此等效的功能，但具有更大的灵 active ，因此我可以更改我使用的帧数:

$(function(){
    setTimeout(function(){ $(".flipbook").addClass("flipbook-1") }, 100 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-2") }, 200 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-3") }, 300 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-4") }, 400 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-5") }, 500 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-6") }, 600 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-7") }, 700 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-8") }, 800 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-9") }, 900 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-10") }, 1000 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-11") }, 1100 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-12") }, 1200 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-13") }, 1300 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-14") }, 1400 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-15") }, 1500 );
});

这些类是在 CSS 样式表中定义的，每个类都应用了不同的背景。我只需要 jQuery/JS 循环遍历它们，直到到达最后一帧。

编辑:不是 flipbook-01 与 flipbook-1 阻止我让它工作。抱歉造成困惑。

编辑:我需要我的 div 在函数运行后看起来像这样:

<div class="flipbook flipbook-1 flipbook-2 flipbook-3 flipbook-4 ... flipbook-15"></div>

Answer 1

您滥用了 delay()功能。 jQuery 只会排队开箱即用的效果(例如 fadeIn() 或 slideUp() )，而不是像 show() 这样的东西。 , hide() , 或 addClass() .

非工作示例 delay()与 addClass() : http://jsbin.com/hayay/4/

相反，您应该只使用 setTimeout就像其他人提到的那样。不过，我建议使用递归方法，而不是 for循环:

var frameNumber = 15;
showFrame(1);
function showFrame(i) {
  $('.flipbook').addClass('flipbook-' + i);
  if (i < frameNumber) {
    setTimeout(function() { showFrame(i+1); }, 100);
  }
}