0

我正在尝试传递元素索引并延迟滑动每个列表项内容

这是我的代码

    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 和...

有什么办法用for循环吗？

4

4 回答 4

7

这是因为var el它的作用域是功能块，而不是循环块。

尝试这样的事情：

for( var i=1; ......) { (function(i) {
    var el = ...
    // rest of your code, unchanged
})(i); }
于 2013-06-20T23:32:58.090 回答
6

您需要一个闭包来确定循环每次迭代的 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);
}
于 2013-06-20T23:34:56.467 回答
2

您是否希望它们在全部滑上之前排队或延迟 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);
于 2013-06-20T23:43:15.247 回答
0

除非您的意图是让它们同时动画化，否则您不能以这种方式将它们设置为循环。如果你这样做，它们都（几乎）同时执行，正如你所说，你只会看到最后一个。

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

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

编辑 鉴于此处的其他答案，我将补充一点，您可能希望将暂停时间从 10 毫秒增加到 100 毫秒，然后使用其他人建议的 *i 解决方案。将 10 毫秒乘以 i 不会给你带来很多明显的延迟。我会从 100 毫秒开始，如果太生涩，则以 10 毫秒的增量从那里向下移动，直到你有一个让你开心的动画。

于 2013-06-20T23:32:51.213 回答