javascript - 数组打印调用未与 for 循环计数器 Javascript 同步更新

Question

我对 JavaScript 和 JQuery 还很陌生。我已经为一个段落写了一系列结尾，我试图使用for循环来相互旋转。虽然我看到了淡入淡出的数量，但我的网站上的文字并没有改变。

这是代码：

var paragraphs = ["foo", "bar", "foobar"];

var rotateText = function(){
    for(var i = 0; i < paragraphs.length; i++){
        $("#id").text(paragraphs[i]).fadeIn(2000).delay(2000).fadeOut(2000);
    }
};

rotateText();

Answer 1

这里有几个问题：

1. .text不遵守标准动画效果队列
2. 使用队列， 的值i将增加到 3，因此不能在回调中使用。

这可以通过添加通过回调更改的文本来解决，该回调.queue本身是通过使用值i作为参数的函数创建的，因此它可以在本地按原样使用。都说：

for (var i = 0; i < paragraphs.length; i++){
    $("#id").queue((function (i) {
        return function () {
            $(this).text(paragraphs[i]).dequeue();
        };
    })(i)
    ).fadeIn(2000).delay(2000).fadeOut(2000);
}

看看它的实际效果：

http://jsfiddle.net/ExplosionPIlls/gBxgQ/

Answer 2

试试这个 ：

这将以循环方式打印文本：foo-bar-foobar-foo-bar..

var faderIndex = 0,

paragraphs = ["foo", "bar", "foobar"];
function nextFade() {
    $('#id').text(paragraphs[faderIndex]).fadeOut(1000, function() {
        faderIndex++;
        if (faderIndex >= paragraphs.length)
            faderIndex = 0;
        $('#id').text(paragraphs[faderIndex]).fadeIn(1000, nextFade);
    });
}
nextFade();

<div id="id"></div>

演示：JSFiddle 上的工作演示

另请参阅：this SO question