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

这里有几个问题：

.text不尊重标准动画效果队列
使用队列时，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); }的值作为参数的函数创建的，因此可以在本地使用它。总而言之：

{{1}}

看到它的实际效果：

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>

演示：Working demo on JSFiddle

另见：this SO question

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

2 个答案: