Question

我有一个非常具体的问题，我甚至不知道在谷歌寻找什么...... 我正在尝试创建一个动画信。有一个笔和5行在一个单独的标签中，都在一个容器元素内，相对定位，有自己的ID，并且线条被隐藏（所有这些都在它们应该出现的位置）。动画是这样的：笔对角移动，出现一条线，笔移动到新线的开头，重复5次，笔回到默认位置，线条消失。我不想分别为所有5个周期编写动画代码，所以我使用for循环将动画插入到队列中。一切都很好，除了最愚蠢的事情 - 我无法显示当前的行号。这是代码：

var penAnimating = false;

function animateLetter() {
    var pen = $('#form_decor_pen');
    var startRight = pen.css('right');
    var startTop = pen.css('top');

    if (!penAnimating) {
        penAnimating = true;

        for (var i=1; i<=5; i++) {
            pen.animate( {
                right: '-=26',
                top: '-=10',
            },{ 
                duration: 600,
                queue: 'penAnimation'
            });

这里'问题部分：

pen.queue('penAnimation', function(next) {          
    //var line = $('#form_header_decor :nth-child(' + i.toString() + ')')
    var line = $('#line_' + i.toString())
    line.show();
    //alert(line.id);
    next(); 
})

问题是，我总是输出5 - 循环结束的数字。

            if (i<5) {
                pen.animate({
                    right: '+=26',
                    top: '+=20',
                   },{
                    duration: 300,
                    queue: 'penAnimation'
                });
            } else {
                pen.animate({
                    right: startRight,
                    top: startTop,
                   },{
                    duration: 300,
                    queue: 'penAnimation',
                    complete: function() {
                        penAnimating = false;
                    }
                });
            }
         }
       pen.dequeue('penAnimation');
    }
}

Answer 1

当你有一个包含异步调用的for循环时，for变量的值将是最后一个值。除非你把代码放在一个闭包中。

将for循环更改为for-loop-with-a-closure。

    for (var i=1; i<=5; i++) { 
    (function(i){
    // the second i is now in a closure.
    })(i);
    }

jQuery - for循环中队列中的animate + show（）

1 个答案: