for 循环中的 jquery Animate 函数

jquery animate function in a for loop

本文关键字：Animate 函数 jquery 循环 for      更新时间：2023-09-26

过去几天我一直在为此苦苦挣扎。我已经阅读了有关闭包和循环问题的所有内容。但是在循环中使用 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");
    });
}
});

我希望按如下方式调用序列：

  1. 调用动画
  2. 动画完成
  3. 调用动画
  4. 动画完成
  5. 调用动画
  6. 动画完成

我得到的是：

  1. 调用动画
  2. 调用动画
  3. 动画完成
  4. 调用动画
  5. 动画完成
  6. 动画完成
现在，在

阅读了有关闭包的信息后，我会说这不是所有答案在这些情况下使用的问题，通常它与在函数声明中使用计数器 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);
    }

因此，将每次迭代作为自执行功能块（这就是我的理解，如果我错了，请纠正我？），我得到的结果与上面相同！

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

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