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);
}

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

$(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 循环遍历它们，直到到达最后一帧。

编辑：不是翻书 01 与翻书 1 阻止我让它工作。很抱歉造成这种混乱。

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

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

Answer 1

正如已经说过的，addClass() 方法是立即方法调用。默认情况下，它不会通过动画队列，这是使用 .delay() 所必需的。

这是我想出的一个有趣的解决方案，它允许您通过动画队列使任何 jQuery 方法工作，因此您可以通过内置动画队列对方法进行排序，可以使用.delay() 来控制时间，可以穿插其他动画等等……

// generic method to allow you to run any jQuery method through the animation queue
// so they will be serialized with other asynchronous animation methods
// such as .delay(), .animate(), .slideUp(), etc...
jQuery.fn.queueMethod = function(methodName /* arg1, arg2, ... */) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    self.queue(function(next) {
        self[methodName].apply(self, args);
        next();
    })
    return this;
}    

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

for (var i = 1; i <= frameNumber; i++) {
    $('.flipbook').delay(100).queueMethod("addClass", "flipbook-" + i);
}

这将运行每个 addClass 方法，间隔 100 毫秒。

几个略有不同的工作示例：http://jsfiddle.net/jfriend00/38BbM/

Answer 2

Fiddle Demo

var frameNumber = 15;
for (var i = 1; i < frameNumber + 1; i++) {
    (function (x) {
        setTimeout(function () {
            $('.flipbook').addClass('flipbook-' + x);
            console.log(x);
        }, x * 100)
    })(i)
}

Answer 3

您误用了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);
  }
}

Answer 4

试试这个：

addClass('flipbook-' + (i<10?("0"+i):i));

这将为 i