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>

JavaScript

jQuery(function($) {
  $(document).ready(function() {
    $("button").click(function() {
      $("#demo").fadeTo("slow", 1);
      (function($) {
        $.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
                  });
                })
              });
            });
          }
        });
      })(jQuery);

      $(document).ready(function() {
        $('#rotate').rotaterator({
          fadeSpeed: 500,
          pauseSpeed: 100
        });
      });
    });
  });
});