JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/redmond/jquery-ui.css">
<button id="button" type="button">Hide text</button>
<br />
<div id="test">This Text will be shown and hidden.</div>
<br />jQuery UI is supposed to EXTEND the jQuery show/hide functions.
<br />There is even a Unit-test in the jQuery UI source to check if the STEP function keeps working.
<br />But the test fails if the property 'EFFECT' is added to the object in the first argument.
<br />
<br />When the property 'effect' is enabled, the step-function and progress-function stop working.
<br />Check the output in the CONSOLE.

CSS

#test {
    color: #f00;
}

JavaScript

var effectMode = 'hide';

$('#button').on('click', function () {
    // Give every click a new Random ID to create a new line in the CONSOLE,
    // because it groups lines with the same output.
    var clickId = Math.round(1000 * Math.random()),
        effectProperties;

    console.log(clickId + ' - ' + effectMode + ' button clicked');

    effectProperties = {
        // When the property 'effect' is enabled, the step-function and progress-function stop working
        //effect: 'fade',
        
        duration: 1000,
        step: function (now, tween) {
            console.log(clickId + ' - Step function');
        },
        /* progress: function (animation, progress, remainingMs) {
            console.log(clickId + ' - Progress function');
        }, */
        complete: function () {
            var showHide = 'show';
            if ($(this).is(':hidden')) {
               showHide = 'hide';
            }
            console.log(clickId + ' - ' + showHide + ' complete');
        }
    };

    if (effectMode === 'show') {
        $("#test").stop(true, true).show(effectProperties);
        $("#button").html('Hide text');
        effectMode = 'hide';
    } else {
        $("#test").stop(true, true).hide(effectProperties);
        $("#button").html('Show text');
        effectMode = 'show';
    }
});