JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {width:50px; height:50px; margin:10px; background:red;}

JavaScript

(function($){
$.fn.shuffle = function() {
return this.each(function(){
var items = $(this).children();
return (items.length)
? $(this).html($.shuffle(items))
: this;
});
}

$.shuffle = function(arr) {
for(
var j, x, i = arr.length; i;
j = parseInt(Math.random() * i),
x = arr[--i], arr[i] = arr[j], arr[j] = x
);
return arr;
}
})(jQuery);

$(function() {

var e = $('div'); // The elements we're searching
var c = e.size(); // Total number of those elements
var r = $.shuffle(c); // an array of the element indices in random order
    
$("div").each(function(i) {
    var e = $(this);
    e.fadeTo(0, 0.05);
    setTimeout(function(){
        e.fadeTo(250, 1);
    }, r[i]*1000);
});
    
});