JavaScript for循环中的jQuery无法正常工作
我试图在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看起来像这样：
您正在滥用delay()函数。 jQuery只会排除开箱即用的效果（例如fadeIn()或slideUp() ），而不是show() ， hide()或addClass() 。
使用addClass()的非工作delay()示例： 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); } }
试试这个：
addClass('flipbook-' + (i<10?("0"+i):i));
这将为i <10添加缺失的零。 关于延迟 - 它不适用于addClass。 你应该坚持使用setTimeout选项。
小提琴演示
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) }
如前所述， 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/