Javascript 从单词云中随机淡入单词

我已经构建了一个单词云（你可以在上查看）

---

目前，云一次将所有单词淡出。我想让文字从上到下随机淡入。这个想法的灵感来自www.vudu.com和。我想，如果我能在正确的方向上实现这一点，我将不胜感激

你的意思是这样的吗

var i = 2;
setInterval(function(){
$('#wordcloud a').eq(Math.floor(Math.random()*i)).animate({ color: "#89171a"}, 800);
i*= 4
}, 800)

---

我建议使用一种算法，从剩余的隐藏单词中随机抽取一个单词，这样每个循环都会显示一个新词，直到所有单词都显示出来。这从所有单词的列表开始，然后随机选取一个单词，将其从列表中删除，设置动画，然后重复从列表中剩余的单词中选取下一个单词的循环，等等。。。它使用动画中的完成功能来启动下一个单词，而不是计时器

function fadeInRandom() {
    var words = $('#wordcloud a');
    function fadeNext() {
        if (words.length) {
            var index = Math.floor(Math.random() * words.length);
            var item = words.eq(index);
            words = words.not(item);
            item.animate({color: "#89171a"}, 800, fadeNext);
        }
    }
    fadeNext();
}
fadeInRandom();

如果您有太多的单词，希望同时淡入多个单词，您可以简单地这样做（一次可以淡入四个）：

或者，如果您希望一次有四个，并且间隔均匀，您可以这样做：

function fadeInRandom() {
    var words = $('#wordcloud a');
    function fadeNext() {
        if (words.length) {
            var index = Math.floor(Math.random() * words.length);
            var item = words.eq(index);
            words = words.not(item);
            item.animate({color: "#89171a"}, 800, fadeNext);
        }
    }
    fadeNext();
    setTimeout(fadeNext, 50);
    setTimeout(fadeNext, 100);
    setTimeout(fadeNext, 150);
    setTimeout(fadeNext, 200);
    setTimeout(fadeNext, 250);
    setTimeout(fadeNext, 300);
    setTimeout(fadeNext, 350);
    setTimeout(fadeNext, 400);
    setTimeout(fadeNext, 450);
    setTimeout(fadeNext, 500);
    setTimeout(fadeNext, 550);
    setTimeout(fadeNext, 600);
    setTimeout(fadeNext, 650);
    setTimeout(fadeNext, 700);
    setTimeout(fadeNext, 750);
}
fadeInRandom();

将整个document.ready（）代码更改为：

$(document).ready(function(){

    var count = 0;

    for(count=0;count<words.length;count++){
        $('#wordcloud').append('<a href="'+words[count].url+'">'+words[count].text+'</a>')
    }

    for(count=0;count<6;count++){
        $('#wordcloud').append($('#wordcloud').html());
    }

    for(count = 0 ; count < $('#wordcloud a').length ; count++){
        $('#wordcloud a').eq(count).css('font-size', $.randomBetween(10, 20)+'px');
    }

    // Random Fade In

    function fadeInRandom() {
        var words = $('#wordcloud a');

        function fadeNext() {
            if (words.length) {
                var index = Math.floor(Math.random() * words.length);
                var item = words.eq(index);
                words = words.not(item);
                item.animate({color: "#89171a"}, 800, fadeNext);
            }
        }
        fadeNext();
    setTimeout(fadeNext, 50);
    setTimeout(fadeNext, 100);
    setTimeout(fadeNext, 150);
    setTimeout(fadeNext, 200);
    setTimeout(fadeNext, 250);
    setTimeout(fadeNext, 300);
    setTimeout(fadeNext, 350);
    setTimeout(fadeNext, 400);
    setTimeout(fadeNext, 450);
    setTimeout(fadeNext, 500);
    setTimeout(fadeNext, 550);
    setTimeout(fadeNext, 600);
    setTimeout(fadeNext, 650);
    setTimeout(fadeNext, 700);
    setTimeout(fadeNext, 750);
    }
    fadeInRandom();

    // Fade In and Fade Out on Hover

    $("#wordcloud a").hover(function() {  
        $(this).stop().animate({ color: "#89171a"}, 800);  
    },function() {  
        $(this).stop().animate({ color: "#2f2f2f" }, 800);  
    }); 
});

$（文档）.ready（函数（）{
var计数=0；
对于（count=0；count一个简单的方法是循环遍历每个单词，并为每个单词指定随机选择的淡入速度。例如

$('.words').each(function(index, value) { // Using the class assigned to each word
    rn = $.randomBetween(200, 5000); // Or whatever random call you're using
    $(this).fadeIn(rn);
});

我一直在尝试让选项三起作用，但没有成功。我确信这是件小事，但我想不出来。我把所有东西都上传到同一个网站@thebradnet-你从来没有调用过
fadeInRandom（）
来启动它。调用
fadeInRandom（）
就在函数定义之后。我相信我只是这样做了，但仍然没有做任何事情。我最初在脚本中有下面一行代码，允许所有内容一次消失在“$”（“#wordcloud”）.delay（1000）.fadeIn（1000）“如果我删除了，即使你的代码不存在，也不会加载任何内容。我已经检查过确保所有内容都已关闭，并且所有内容都符合我的要求。我已将修订后的副本上载到以前提供的链接中。感谢你的时间和耐心。我对JQuery和Javascript相当陌生，我正在尝试通过尝试和错误来学习。因此再次感谢您。您插入了错误的内容，现在出现了javascript语法错误，因此代码无法运行。我已在我的答案末尾添加了整个document.ready（）块的副本。请像这样尝试（确保用我拥有的所有内容替换整个块）。我替换了所有内容，但仍然没有加载。我已将结果上载到上面的链接。想法？谢谢！
$('.words').each(function(index, value) { // Using the class assigned to each word
    rn = $.randomBetween(200, 5000); // Or whatever random call you're using
    $(this).fadeIn(rn);
});