JSFiddle - React, Tailwind, and code Playground

Animate random cubes

by GM 400

HTML

<div id="toast" style="background-color:orange; width:1000px; height:400px;"></div>

JavaScript

(function ($) {
    $.fn.cubes = function (options) {

        var defaults = {
            columns: 4,
            rows: 3,
            size: 99,
            background: 'blue'
        };
        options = $.extend(defaults, options);

        var that = this;

        var _hide = function () {
            that.show('slow');
            $('.cube').each(function (index, element) {
                var sleepTime = Math.floor(Math.random() * 2000);
                var t = setTimeout(function () {
                    var d = Math.floor(Math.random() * 2000);
                    $(element).fadeTo(d, 0);
                }, sleepTime);
            });
        };
        var _show = function () {
            $('.cube').each(function (index, element) {
                var sleepTime = Math.floor(Math.random() * 1000);
                var t = setTimeout(function () {
                    var d = Math.floor(Math.random() * 1000);
                    $(element).fadeTo(d, 0.99);
                }, sleepTime);
            });
            var h = setTimeout(_hide, 4000);
        };

        var create = function (element) {
            //var that = $(element);
            //that.hide();
            var rows = that.height() / options.size;
            var columns = that.width() / options.size;

            //var w = (options.columns * options.size) + options.columns;
            //var h = (options.rows * options.size) + options.rows;

            //var w = (  columns * options.size );
            //var h = (  rows * options.size );

            var background = $(that).css({
                "z-index": -1,
                "display": "block",
            });

            var cubes = $("<div>").css({
                "width": that.width(),
                "height": that.height(),
                "z-index": -1,
            }).attr('id', 'cubes');

            for (var i = 1; i < columns * rows; i++) {
                var cube = $("<div>").css({
                    "width":...