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

【问题标题】：Randomly Disappearing Text Effect - Selecting Random Divs Using jQuery随机消失的文本效果 - 使用 jQuery 选择随机 div
【发布时间】：2023-03-13 11:40:01
【问题描述】：

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

这里是代码供参考：JSFIDDLE LINK

只是对流程的回顾：

文档已加载，有两段文字。
运行 jQuery，用于将每个字母放入一个 span 中——具有唯一的类号。
跨度都有 CSS 不透明度过渡。
jQuery 循环遍历#main 容器中的所有 span，并添加 .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');

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

谢谢！

【问题讨论】：

标签： javascript jquery html css css-transitions

【解决方案1】：

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

jsFiddle Demo

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 Demo

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

【讨论】：

太棒了——喜欢你为所有跨度创建单个循环的方式。我有一个我没有发布的纯 jQuery 解决方案，它把我的 CPU 提高到 99%……使用这种 CSS 方法，我看到低 30% 的……太棒了！再次感谢！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可能对它进行了过度设计。见this fiddle

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

【讨论】：