jquery for 循环中的动画函数

Question

过去几天我一直在为此苦苦挣扎。我已经阅读了所有关于闭包的内容以及将它们置于循环中的问题。但是在循环中使用 jquery animate 函数对我来说不起作用。但也许我不明白闭包背后的实际意义，这就是我问的原因:) 所以，这里是例子：

$(document).ready(function() {
var obj1 = $(".wraper");
for (var i = 0; i < 3; i++) {
    alert("Calling animate");
    obj1.animate({"opacity": 0.4}, 500, function() {     
        alert("Animate finished");
    });
}
});

我希望调用序列如下：

调用动画
动画完成
调用动画
动画完成
调用动画
动画完成

我得到的是：

调用动画
调用动画
动画完成
调用动画
动画完成
动画完成

现在，在阅读了闭包之后我会说这不是所有答案在这些情况下使用的同一个问题，通常它与在函数声明中使用计数器 i 有关，但这里它与顺序有关其中调用了回调，我不知道 jquery 库如何调用动画回调，谁能帮我解决这个问题？

注意：如果这样使用：

    $(document).ready(function() {
       var obj1 = $(".wraper");
       for (var i = 0; i < 3; i++) (function(n) {
           alert("Calling animate");
           obj1.animate({"opacity": 0.4}, 500, function() {  
              alert("Animate finished");
           });
       })(i);
    }

所以，把每次迭代都做成一个自执行的函数块（我是这么理解的，有错请指正？），结果和上面一样！

Answer 1

您可以使用递归匿名函数代替 for 循环：

var i = 0;
(function recur() {
    if (i < 3) {
        i++;
        alert("Calling animate");
        obj1.animate({"opacity": 0.4}, 500, function() {     
            alert("Animate finished");
            recur();
        });
    }
})();

jquery for 循环中的动画函数

jquery animate function in a for loop

javascript

jquery-animate