JSFiddle - React, Tailwind, and code Playground

by Blink

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cycle Example</title>
</head>
<body>
  <div id="cycle">Initial Value</div>
</body>
</html>

JavaScript

(function(w, $) {
  $.fn.cycle = function(arr, o) {
    // Avoid acting on empty sets
    if ( this.length ) {
      // Cache the array length
      var aLen = arr.length;
      
      // merge options with defaults
      o = $.extend({
        delay              : 100,
        transitionDuration : 500
      }, o );
      
      // return a jQuery object
      return this.each(function() {
        // Cache our jQuery object
        var $this = $(this);
        var counter;
        // Named function to avoid arguments.callee
        function switchText ( idx ) {
          
          // Turn down opacity all the way (so we don't get reflows like with fadeIn/Out)
          $this.animate( { opacity: 0 }, o.transitionDuration, o.transitionEasing, function () {
            
            // Replace the text and turn the opacity back up
            $this
              .text( arr[ idx ] )
              .animate( { opacity: 1 }, o.transitionDuration, o.transitionEasing, function () {                
                // Set a timeout from here, so we can avoid timing errors
                  if (aLen !== (idx + 1)) {         
                w.setTimeout( function(){ switchText( ( idx + 1 ) % aLen); }, o.delay );   
                  }                      
              });
          });
        }
            
        // Start it off (use w, so it's locally scoped and jslint is happy)
        w.setTimeout( function(){ switchText( 0 ); }, o.delay );
      });
    }
    return this;
  };
})(this, this.jQuery);

// Document ready
$(function(){
  // Call our plugin on the object
  $('#cycle').cycle(['First Value', 'Second Value', 'Etc....']);
});