JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  the queue length is: <span></span>
</p>

<div></div>

CSS

div{display:none;position:absolute;left:0;top:60px;width:40px;height:40px;margin:3px;background:green}
div.newcolor{background:blue}
p{color:red}

JavaScript

var div = $('div');

function runIt() {
  // div에 여러가지 효과를 적용(queue를 쌓음)
  div.show('slow');
  div.animate({
    left: '+=200'
  }, 2000);
  div.slideToggle(1000);
  div.slideToggle('fast');
  div.animate({
    left: '-=200'
  });
  div.hide('slow');
  div.show(1200);
  div.slideUp('normal', runIt);
}

function showIt(){
  // div의 queue의 배열을 n에 삽입
  var n = div.queue('fx');
  $('span').text(n.length);
  // 재귀함수(0.1초 마다 자기 자신(showIt)을 실행)
  setTimeout(showIt, 100);
}

runIt();
showIt();