Проявление Слова из слова Облако Случайным

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