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

var tasks = {
	0: function(){
  	$('#art1').animate({'width':'100px'},1000,this.next)
  },
	1: function(){
  	$('#art2').animate({'width':'100px'},1000,this.next)
  },
  2: function(){
  	$('#art3').animate({'width':'100px'},1000,this.next)
  },
	3: function(){
  	$('#art4').animate({'width':'100px'},1000, function() {
    	this.next('Pen', 'Pinapple', ' Apple', 'Pen!');
    }.bind(this));
  },
  4: function(text1, text2, text3, text4){
  	$('#art1').text(text1);
    $('#art2').text(text2);
    $('#art3').text(text3);
    $('#art4').text(text4);
  },
  i: 0,
  next: function() {
  	console.log('arguments', arguments); // Please check the valiable "arguments"
		tasks.i = 1 + tasks.i; // count up
    /*
     about function apply
     		you can asign "this" to the function tasks[i] with first arguments.
      	you can asign "arguments" to the function  tasks[i] with second arguments. 
     */
		tasks[tasks.i].apply(tasks,arguments);// excecute tasks[i]
    
	}
};

tasks[0]();// excecute tasks[0]