JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="art1"></div>
<div id="art2"></div>
<div id="art3"></div>
<div id="art4"></div>

CSS

div {
  background-color: skyblue;
  width: 500px;
  height: 100px;
}

JavaScript

(function(){var _=arguments;_.next=function(){_[++_.i].apply(_,arguments)},_[_.i=0]()})(
	function(){
  	console.log(this);
  	$('#art1').animate({'width':'100px'},1000,this.next)
  },
	function(){
  	$('#art2').animate({'width':'100px'},1000,this.next)
  },
	function(){
  	$('#art3').animate({'width':'100px'},1000,this.next)
  },
  function(){
  	$('#art4').animate({'width':'100px'},1000,function(){
    	this.next('pen', 'pinapple', 'apple', 'pen!');
  	}.bind(this));
  },
  function(text1, text2, text3, text4){
  	$('#art1').text(text1);
    $('#art2').text(text2);
    $('#art3').text(text3);
    $('#art4').text(text4);
  }
);