JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="colorchangetext">
MY TEXT HERE
</div>

CSS

.colorchangetext{
  transition: all 1s;
}

JavaScript

var colorchanger = {

	colors: Array('#ff0000','#ff9900','#cc9933','#445566'),
  colorindex: 0,
  transition_time: 1000,
  
  update: function(){
  
  	$('.colorchangetext').css('color',colorchanger.colors[colorchanger.colorindex]);
    
    if(colorchanger.colorindex == (colorchanger.colors.length-1)){
    
    	colorchanger.colorindex = 0;
    
    } else {
    
    	colorchanger.colorindex++
    
    }
    
  },
  
  init: function(){
  
  	setInterval(function(){
    
    	colorchanger.update();
    
    }, colorchanger.transition_time)
  
  }
	
}

colorchanger.init();

/* remove the one above and uncomment me

$(document).ready(function(){

	colorchanger.init();

});

*/