JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    var $110 = jQuery;
</script>    
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>

<h1 id="jQuery-version-1-10-1">jQuery 1.10.1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua.</h1>
<br>
<h1 id="jQuery-version-1-11-0">jQuery 1.11.0: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua.</h1>

CSS

h1 {
    font: 34px arial;
}

JavaScript

var te = function ($) {
	var Te = {
		init: function (options, elem) {
			var effectOption = elem.style.opacity !== undefined ? 'opacity: 0;' : 'filter: alpha(opacity=0); display: inline-block;';
			var $elem = $(elem);
			this.oldText = $elem.html();
			this.options = $.extend( {}, $.fn.te.options, options );
			this.textArray = [];
			$elem.html('');
			for (var i = 0; i < this.oldText.length; i++) {
				this.textArray[i] = "<span class='text-effect' style='" + effectOption + "'>" + this.oldText.substr(i, 1) + "</span>";
				$elem.append(this.textArray[i]);
			}
			this.run('opacity', $elem.css('opacity'), $elem);
		},

		run: function (effect, oldEffect, $elem) {
			var self = this;
			var obj = {};
			var i = 0;
			var $spans = $elem.children('span.text-effect');
			obj[effect] = oldEffect;
			var effectInterval = setInterval(function () {
				$spans.eq(i).animate(obj, self.options.completionSpeed / self.textArray.length, function () {
						if ($(this).index() === self.textArray.length - 1) {
							clearInterval(effectInterval);
							$elem.html(this.oldText);
						}
					});
				i++;
			}, self.options.effectSpeed);
		},
	};

	$.fn.te = function(options) {
		return this.each(function() {
			var te = Object.create(Te);
			te.init(options, this);
		});
	};

	$.fn.te.options = {
			completionSpeed: 350000,
			effectSpeed: 90,
	};
};

te($110);
te($);

$110('#jQuery-version-1-10-1').te();
$('#jQuery-version-1-11-0').te();