Question

我已经构建了一个词云（您可以在http://www.cybernetiksolutions.com/wordcloud处查看）

目前，云一次消失所有单词。我想让这些词从上到下随机淡出。这个想法的灵感来自www.vudu.com和http://wonderwall.msn.com。我认为如何能够实现这一目标的正确方向将非常感激。

Answer 1

我建议使用一种算法，从剩余的隐藏单词中选择一个随机单词，这样每个循环都可以保证显示一个新单词，直到显示所有单词。这从所有单词的列表开始，然后随机选择一个，从列表中删除它，动画它，然后重复循环从列表中剩余的那个中选择下一个等等...而不是计时器，它使用动画中的完成功能启动下一个单词。

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();
    fadeNext();
    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);  
    }); 
});

Answer 2

你的意思是这样吗？

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

Answer 3

一种简单的方法是循环每个单词并为每个单词分配随机选择的淡入淡出速度。例如......

$('.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);
});

随机淡化词云中的单词

3 个答案: