0

我有一个非常具体的问题，我什至不知道在谷歌中寻找什么......我正在尝试创建一个动画字母。有一支笔和 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');
    }
}
4

1 回答 1

0

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

将 for 循环更改为带有闭包的 for 循环。

    for (var i=1; i<=5; i++) { 
    (function(i){
    // the second i is now in a closure.
    })(i);
    }
于 2012-08-30T17:51:00.360 回答