JSFiddle - React, Tailwind, and code Playground

by dont_panic

HTML

<button class="btn" type="submit">Sign Up!</button>
<h1 id="demo"> I am 
    <div id="rotate">
        <div>awesome.</div>
        <div>invincible.</div>
        <div>unbeatable.</div>
        <div>indestructible.</div>
    </div>
</h1>

CSS

#demo {
    opacity: 0;
}

JavaScript

$(document).ready(function() {

	// First define your jQuery function, independent of any clicks or content
    $.fn.extend({
        rotaterator: function(options) {
            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 100,
                child: null
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                var o = options;
                var obj = $(this);
                var items = $(obj.children(), obj);
                
                items.each(function() {
                    $(this).hide();
                });
                
                if (!o.child) {
                    var next = $(obj).children(':first');
                } else {
                    var next = o.child;
                }
                
                next.fadeIn(o.fadeSpeed, function() {

                    // Added this.  If we're on the last element, just bail out.
                    // .index() is a zero-based count, so need to add 1
                    if (next.index() +1 === items.length) {
                        return;
                    }

                    next.delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
                        var next = $(this).next();
                        // Commented out this 
                        // if (next.length == 0) {
                        //  next = $(obj).children(':last');
                        //}
                        $(obj).rotaterator({
                            child: next,
                            fadeSpeed: o.fadeSpeed,
                            pauseSpeed: o.pauseSpeed
                        });
                    })
                });
            });
        }
    });

	// Now define interactio handlers
    $("button").click(function() {
        $("#demo").fadeTo("slow", 1);

        $('#rotate').rotaterator();
    });
});