随机消失的文本效果 - 使用 jQuery 选择随机 div

Question

我正在做的事情有奇怪的问题。

作为参考，这里是代码：JSFIDDLE LINK

只是流程的回顾：

1. 文档已加载，并且有两段文本。
2. jQuery是运行的，它用于将每个字母放入一个跨度中 - 具有唯一的类号。
3. 跨度上都有 CSS 不透明度过渡。
4. jQuery 循环遍历容器中的所有跨度 #main 并添加 .change 类以触发不透明度。 一旦所有跨度都添加了类，此循环就会结束。

现在我缺少的是一种遍历跨度中所有div 的方法——并随机开始将每个跨度的不透明度更改为 0。这需要以完全随机的顺序完成 - 但是一旦所有跨度都循环完成，就需要停止。

我有一些数学代码 - 但我不确定为什么它不起作用。

var min = 1;
var max = 400;
var paras = $('#main span');
var random = Math.floor(Math.random() * (max - min + 1)) + min;
paras.hasClass('number' + random).addClass('change');

任何人都可以帮助我进行数学计算 - 或者帮助我想出另一个解决方案，我相信如果它有效，效果会很好。

谢谢！

Answer 1

您始终可以只选择剩余的span元素，而不选择change类。

jsFiddle 演示

function randomChange() {
    var paras = $('#main span:not(.change)');
    var min = 0;
    var max = paras.length - 1;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;
    $(paras.get(random)).addClass('change');
    if (paras.length > 1) setTimeout(randomChange, 5);
}

---

如果我们只搜索一次未更改的跨度并从数组中删除更改的项目，我们可以提高效率。

jsFiddle 演示

var paras = $('#main span:not(.change)');
function randomChange() {
    var min = 0;
    var max = paras.length - 1;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;
    $(paras.get(random)).addClass('change');
    // Remove from item from the array
    paras.splice(random, 1);
    console.log("Chose: "+ random + " Out: " + max);
    if (paras.length > 0) setTimeout(randomChange, 5);
}

Answer 2

.hasClass 不是选择器，您需要选择要更改的 span 元素：

$('#main span.number'+random).addClass("change");

Answer 3

你可能过度设计它。看到这个小提琴

$(document).ready(function() {
    $('p').each(function(){        
        var spans = $(this).text().split(' ');        
        $p = $("<p></p>");        
        $.each(spans, function(index, value) {
          $p.append($("<span>"+value+" </span>"));
        });        
        $(this).replaceWith($p);        
    });
    $("#main span").each(function(index) {
        var r = Math.floor(Math.random() * 2000);
        $(this).delay(r).fadeTo('slow', 0);
    });    
});