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

编辑：这不是flipbook-01 vs flipbook-1阻止我让它工作。对此感到抱歉。

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

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

Answer 1

试试这个：

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

这将为i <10添加缺失的零。关于延迟 - 它不适用于addClass。你应该坚持使用setTimeout选项。

Answer 2

您滥用delay()功能。 jQuery只会排除开箱即用的效果（例如fadeIn()或slideUp()），而不是show()，hide()或addClass()之类的内容

delay()与[{1}}：http://jsbin.com/hayay/4/

的非工作addClass()示例

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

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

Answer 3

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 4

正如已经说过的那样，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/

JavaScript for循环中的jQuery无法正常工作

4 个答案: