JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<button class="btn btn-default">
  <span>
    <span class="active">Yahooo</span>
    <span>Reddit</span>
    <span>Zeco Energy</span>
    <span>Gavin Roberts</span>
  </span>
</button>

SCSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
  padding: 50px;
}
.btn {
  outline: none !important;
  > span {
    position: relative;
    > span {
      position: absolute;
      opacity: 0;
      left: 0;
      top: 0;
      transition: opacity .25s ease-in-out;
      &.active {
        z-index: 5;
        position: relative;
        opacity: 1;
      }
    }
  }
}

JavaScript

(function($) {
	$(function() {
  	window.move = function() {
    	var items = $(this).find('> span > span'),
      		current = items.filter('.active'),
        	next;
      next = current.next();
      if (next.length === 0) {
      	next = items.first();
      }
      current.removeClass('active');
      next.addClass('active');
    };
    
    setInterval(function() {
    	window.move.call($('button'));
    }, 5000);
  });
})(jQuery);