JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<p id="p1">Here is some text to type.</p>
<p id="p2">This is a <a href='test.htm'>test</a>paragraph with a callback attached.</p>
<p id="p3">This paragraph will appear when the second paragraph is complete.</p>
<p><a href="#" id="start" class="btn primary">Click to start typing</a></p>
CSS
body {
margin: 1em;
}
#p1,#p3 {
display: none;
}
JavaScript
// Make sure Object.create is available in the browser (for our prototypal inheritance)
// Courtesy of Douglas Crockford
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
(function($) {
// Main plugin class
var Typer = {
// Recursive function that types one letter at a time
doType: function() {
var _this = this;
_this.el.innerHTML += _this.letters.shift();
// If there are more letters to type, setTimeout
// Otherwise, execute callback function
if(_this.letters.length > 0) {
_this.timeout = window.setTimeout(function(){
_this.doType();
},_this.options.speed);
} else {
if(typeof _this.callback === 'function') {
_this.callback();
}
}
},
// Plugin init function
init: function(el,options,callback) {
this.options = $.extend({},$.fn.type.defaults,options);
this.callback = callback;
this.el = el;
this.$el = $(el);
this.letters = (this.options.text || el.innerHTML).split('');
if(!this.options.append) { this.el.innerHTML = ''; }
if(this.$el.is(':hidden')) { this.$el.show(); }
this.doType();
}
};
// Plugin function - for each element, create a new Typer and run 'init()'
$.fn.type = function(options,callback) {
return this.each(function(){
var t = Object.create(Typer);
t.init(this,options,callback);
});
};
...