JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="red"></div>
<div class="green"></div>
<div>
    <button id="toggle">Extended toggle</button>
    <button id="toggleDefault">jQuery toggle</button>
</div>
<div class="jred"></div>
<div class="jyellow"></div>
<div class="jblue"></div>
<div class="jred"></div>
<div class="jred"></div>
<div class="jgreen"></div>

CSS

div {
    display:block;
    text-align:center;
}
button {
    margin-top: 10px;
    margin-bottom: 10px;
    width:25%;
}
div[class] {
    height:50px;
    width: 50%;
    float:left;
}
.red, .jred {
    background:red;
}
.yellow, .jyellow {
    background:yellow;
}
.blue, .jblue {
    background:blue;
}
.green, .jgreen {
    background:green
}

JavaScript

//.fadeOutIntact( [duration ][, complete ] )
//.fadeInIntact( [duration ][, complete ] )
//.fadeToggleIntact( [duration ][, complete ] )
$.fn.extend({
    fadeOutIntact: function (o, c) {
        var delay = 400;
        if (typeof o == 'undefined') {
            delay = 400;
        } else if (typeof o == 'string') {
            switch (o.toLowerCase()) {
                case 'slow':
                    delay = 800;
                    break;
                case 'fast':
                    delay = 200;
                    break;
                default:
                    delay = 400;
            }
        } else if (typeof o == 'number') {
            delay = o;
        } else {
            delay = 400;
        }

        $(this).animate({
            opacity: 0
        }, delay);

        if (typeof c == 'function') {
            c();
        }
        return this;
    },

    fadeInIntact: function (o, c) {
        var delay = 400;
        if (typeof o == 'undefined') {
            delay = 400;
        } else if (typeof o == 'string') {
            switch (o.toLowerCase()) {
                case 'slow':
                    delay = 800;
                    break;
                case 'fast':
                    delay = 200;
                    break;
                default:
                    delay = 400;
            }
        } else if (typeof o == 'number') {
            delay = o;
        } else {
            delay = 400;
        }

        $(this).animate({
            opacity: 1
        }, delay);

        if (typeof c == 'function') {
            c();
        }
        return this;
    },

    fadeToggleIntact: function (o, c) {
        currOpacity = $(this).css('opacity');

        if (currOpacity == 0) {
            $(this).fadeInIntact(o, c);
        } else {
            $(this).fadeOutIntact(o, c);
        }
        return this;
    }

});

$('#toggle').click(function () {
   ...