Question

我正在尝试传递元素索引，并使用延迟

来滑动每个列表项内容

这是我的代码

    for(var i = 1; i <= $("#colContainer li").length ; i++) {
        var el = $("#colContainer li:nth-child(" + i + ") .colContent");

        var delay = function() {
            slide(el);
        };
        setTimeout(delay, 10);
        function slide(el){
            el.slideUp();
        };
    };

但每次只是最后一个滑落

我期望他们从索引1滑动到延迟

的结尾

我也试过这个

    index = $(this).parent("li").index();
    for(var i = 1; i <= $("#colContainer li").length ; i++) {
        (function(i) {
            var el = $("#colContainer li:nth-child(" + i + ") .colContent");

            var delay = function() {
            slide(el);
            };
            setTimeout(delay, 10);
            function slide(el){
            el.slideUp();
            };
        })(i);
    };

但它们都会立刻滑动，我希望索引1幻灯片，在索引2和...之后...

对于循环有什么方法吗？

Answer 1

这是因为var el的范围是功能块，而不是循环块。

尝试这样的事情：

for( var i=1; ......) { (function(i) {
    var el = ...
    // rest of your code, unchanged
})(i); }

Answer 2

你需要一个闭包来为循环的每次迭代确定el的值。

for(var i = 1; i <= $("#colContainer li").length ; i++) {
  var el = $("#colContainer li:nth-child(" + i + ") .colContent");
  (function(el) {
    setTimeout(function(){
        el.slideUp();
    },10);
  })(el);
}

然而，这仍然会导致它们同时生成所有动画，如果这是期望的结果，您可以使用jQuery一步完成所有操作。如果您希望它们一次动画一个，您可以这样做：

for(var i = 1; i <= $("#colContainer li").length ; i++) {
  (function(i) {
    var el = $("#colContainer li:nth-child(" + i + ") .colContent");
    setTimeout(function(){
        el.slideUp();
    }, i * 10);
  })(i);
}

Answer 3

您是否希望它们在排队之前排队或延迟10毫秒？

您需要for循环吗？

后者不会做后者吗？

setTimeout(function() {
   $("#colContainer li .colContent").slideUp();
}, 10);

排队幻灯片示例：

(function slideContent(index) {
   $("#colContainer li:nth-child(" + index + ") .colContent").slideUp();
   if ($("#colContainer li:nth-child(" + (index + 1) + ") .colContent").length == 1) {
      setTimeout(function() { slideContent(index + 1); }, 250);
   }
})(1);

Answer 4

除非您的目的是让它们同时具有动画效果，否则您无法以这种方式将它们设置为循环。如果你这样做，他们都会（几乎）同时被执行，正如你所说，你实际上只会看到最后一个。

您需要从上一个完成后触发每个连续的一个。将它们与回调链接在一起。

delay应该设置下一个setTimeout。然后你会得到你想要的结果。

修改鉴于此处的其他答案，我将补充说，您可能希望将暂停时间从10毫秒增加到类似100，然后使用其他人建议的* i解决方案。乘以10ms我不会让你在明显的延迟方面得到很多。我会从100毫秒开始，如果那个太生涩，从那里以10毫秒的增量向下移动，直到你有一个让你快乐的动画。

setTimeout传递参数问题

4 个答案: