html - jQuery text effect not rendering with individual letters -

i trying take h1 says "hello world", , using lettering.js(see below), break h1 series of spans can change colors of letters individually make rainbow effect. want use jumble text effect found here: http://cozuya.github.io/texteffect-jquery-plugin/. here link lettering plugin: https://github.com/davatron5000/lettering.js .

essentially happens is, colors changed, letters not jumble, , colors revert white after few moments.
i've tried using .delay() before lettering call, putting 1 in script before other, nothing seems these 2 plug ins work together.

this h1 "hello world" after .lettering called:

<h1 id = "letters">   <span class="char1">"</span>   <span class="char2">h</span>   <span class="char3">e</span>   <span class="char4">l</span>   <span class="char5">l</span>   <span class="char6">o</span>   <span class="char7"> </span>   <span class="char8">w</span>   <span class="char9">o</span>    ... , on </h1>  

my jquery:

$(document).ready(function() {   $('#letters').texteffect({effect: 'jumble',      effectspeed: 150,      completionspeed: 6000    });      $("#letters").lettering(); }); 

css:

#letters .char10 {   color: #94c472; } #letters .char11 {   color: #b33e92; } #letters .char12 {   color: #d18d61; } #letters .char13 {   color: #da3c40; } #letters .char14 {   color: #1aaaa2; } #letters .char15 {   color: #1aaaa2; } 

these plugins not compatible is. reason behavior is:

1. $('#letters').texteffect(...) delayed due timeouts animation
2. $("#letters").lettering() executed before texteffect done rendering. lettering plugin modifying element causing issue noticed jumble not working (it transformed element text node element multiple span elements, texteffect plugin expecting string of text, own manipulation span elements).

to working couple simple modifications texteffect plugin required. changed jumble , runjumble functions.

jumble

removed call self.reset() why colors changed after delay, pointed out. changing individual span tags regular text node. (i commented out show was; see below)

created colorarray example colors. whatever want, , modified passed options. colorarray passed runjumble jumbled letters' color, , used set correct letter's color after jumble animation completes.

runjumble

used colorarray set jumbled letter's color. replaced option options.jumblecolor , changed how function works (picks color array @ random instead of using single color defined option).

this example purposes -- want take step further , create different methods, perhaps called rainbowjumble instead of messing original jumble, or add option {rainbow:true} , branch on different color behavior. pull request , merged plugin in github. wiz!

$(document).ready(function() {    $('#letters').texteffect({effect: 'jumble',       effectspeed: 150,       completionspeed: 6000     });     });    // http://cozuya.github.io/texteffect-jquery-plugin/javascripts/texteffect.jquery.js  // jquery text effect plugin created chris ozols copywrite mit license 2013  // v0.1.6    if ( typeof object.create !== 'function' ) {  	object.create = function( obj ) {  		function f() {}  		f.prototype = obj;  		return new f();  	};  }    (function( $, window, document, undefined ) {    	var texteffect = {  		init: function (options, elem) {  			var _options = {};  			this.$elem = $(elem);  			this.oldtext = this.$elem.html();  			typeof options === 'string' ? _options.effect = options : _options = options;  			this.options = $.extend( {}, $.fn.texteffect.options, _options );  			this[this.options.effect]();  		},    		setup: function (effectoption) {  			this.textarray = [];  			this.$elem.html('');  // oddly jquery.empty() doesn't work here.  			for (var = 0; < this.oldtext.length; i++) {  				this.textarray[i] = "<span class='text-effect' style='" + effectoption + "'>" + this.oldtext.substr(i, 1) + "</span>";  				this.$elem.append(this.textarray[i]);  			}  		},    		random: function () {  			var effects = ['grow', 'fade', 'jumble', 'slide', 'dropdown'];  			var effect = effects[(math.floor(math.random() * effects.length))];  			this[effect]();  		},    		slide: function () {  			var startposition = (this.$elem.offset().left + this.$elem.width());  			this.setup('visibility: hidden; position: relative; left: ' + startposition + 'px;');  			this.run('left', 0);  		},    		dropdown: function () {  			var offscreen = this.$elem.offset().top + this.$elem.height() * 1.1;  // little padding  			this.setup('position: relative; bottom: ' + offscreen + 'px;');  			this.run('bottom', 0);			  		},    		grow: function () {  			this.setup('font-size: 0px;');  			this.run('fontsize', this.$elem.css('fontsize'));  		},    		fade: function () {  			this.$elem[0].style.opacity !== undefined ? this.setup('opacity: 0;') : this.setup('filter: alpha(opacity=0); display: inline-block;');  // ie8 , below. jquery handles animating opacity natively.  			this.run('opacity', this.$elem.css('opacity'));  		},    		jumble: function () {  			var self = this;              var colorarray = ["#94c472","#b33e92","#d18d61","#da3c40","#1aaaa2","#1aaaa2"];  			var letterarray = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];  			var = 0;  			this.setup();  			var jumbleeffectinterval = setinterval(function () {  				if (self.jumbleinterval) {  					clearinterval(self.jumbleinterval);  				}  				self.runjumble(letterarray, colorarray, i);    				self.$elem.children('span.text-effect').eq(i).html(self.oldtext.substr(i, 1)).css('color', colorarray[math.floor(math.random() * (colorarray.length - 1))]);  				if (i === (self.oldtext.length - 1)) {  					clearinterval(jumbleeffectinterval);  					//self.reset(); // omit reset. changing charcter spans plain text  				} else {  					i++;  				}  			}, self.options.effectspeed);  		},    		runjumble: function (letterarray, colorarray, jumblelength) {  			var self = this;  			this.jumbleinterval = setinterval(function () {  				for (var = (self.textarray.length - 1); > jumblelength; i--) {  					if (self.oldtext.substr(i, 1) !== ' ') {  						self.$elem.children('span.text-effect').eq(i).html(letterarray[math.floor(math.random() * (letterarray.length - 1))]).css('color', colorarray[math.floor(math.random() * (colorarray.length - 1))]);  					} else {  						self.$elem.children('span.text-effect').eq(i).html(' ');  					}  				}  			}, 70);  		},    		run: function (effect, oldeffect) {  			var self = this;  			var obj = {};  			var i;  			obj[effect] = oldeffect;  			this.options.reverse ? = this.textarray.length - 1 : = 0;  			var $spans = self.$elem.children('span.text-effect');  			var effectinterval = setinterval(function () {  				$spans.eq(i).css('visibility', 'visible').animate(obj, self.options.completionspeed / self.textarray.length, function () {  						if ($(this).index() === self.textarray.length - 1 && !self.options.reverse || self.options.reverse && $(this).index() === 0) {  							clearinterval(effectinterval);  							self.reset();  						}  					});  				self.options.reverse ? i-- : i++;  			}, self.options.effectspeed);  		},    		reset: function () {  			this.$elem.html(this.oldtext);  		}  	};    	$.fn.texteffect = function(options) {  		return this.each(function() {  			var texteffect = object.create(texteffect);  			texteffect.init(options, this);  		});  	};    	$.fn.texteffect.options = {  		effect: 'random',  		effectspeed: 150,  		completionspeed: 6000,  		jumblecolor: '#7f7f7f',  		reverse: false  	};  })( jquery, window, document );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <h1 id = "letters">goodbye cruel world</h1>