Question

我有一个数组，我想要做的就是当页面完全加载一个单词（在html中的span标签内）淡出jQuery并替换为数组中的单词，显示2的新单词秒，然后由数组的下一个字再次替换，直到数组结束。它是如此简单，但我已经尝试了数千种不同的循环方式，并且在网站上显示任何内容之前总是遍历数组，当它完全加载时会显示数组的最后一个字。

这是我的一个尝试：

$(function(){
    var words=new Array('red','blue','yellow','black','white','orange',
                        'green','brown');
    var wordList;
    for(var i in words){
        wordList=words[i];
        $("#word").fadeOut(200).html(wordList).fadeIn(200).delay(2000);
    }   
});

可能这个错误非常愚蠢但是我开始使用javascript而且我会发疯...谢谢

Answer 1

使用[]代替new Array()。
.html不是动画功能，会立即运行（忽略.delay），因此不会逐字逐句。仅在动画完成时使用第二个参数设置它，您可以将其传递给动画函数。
您可以在一段时间后使用setTimeout来运行某个功能。您将遇到的问题是使用for循环确定范围（wordList每次都相同）。但是，您可以使用$.each并传递一个函数（函数将引入一个新的范围，并且范围问题将会消失）。

http://jsfiddle.net/pimvdb/EkaAF/

$(function(){
    var words = ['red','blue','yellow','black','white','orange', 'green','brown'];

    $.each(words, function(i, v) { // for each word (i is index, v is value)
        setTimeout(function() {
            $("#word").fadeOut(200, function() { // fade out
                $(this).html(v).fadeIn(200); // when completed, set html and fade in
            });
        }, i * 2000); // 2000 * index, so each one will wait 2000 ms after previous one
    });
});

Answer 2

我会这样做。

var wordcount = 0;
var words=new Array('red','blue','yellow','black','white','orange','green','brown');

$(window).load(function(){
    changeWord();
});

function changeWord(){
    $('#word').fadeOut(200, function(){
        $('#word').html(words[wordcount]);
        wordcount++;

        $('#word').fadeIn(200, function(){
            changeWord();
        });
    });
}

在页面完全加载时从数组中获取单词

2 个答案: