JSFiddle - React, Tailwind, and code Playground

HTML

<button id="start">Start</button>
<button id="stop">Stop</button>

<div></div>

CSS

div{display:none;position:absolute;left:0;tpo:30px;width:40px;height:40px;margin:3px;background:green}
div.newcolor{background:blue}

JavaScript

$('#start').click(function(){
  var myDiv = $('div');
  myDiv.show('slow');
  myDiv.animate({
    left: '+=200'
  }, 5000);
  myDiv.queue(function(){
    var _this = $(this);
    _this.addClass('newcolor');
    _this.dequeue();
  });
  myDiv.animate({
    left: '-=200'
  }, 1500);
  myDiv.queue(function(){
    var _this = $(this);
    _this.addClass('newcolor');
    _this.dequeue();
  });
  myDiv.slideUp();
});

$('#stop').click(function(){
  var myDiv = $('div');
  // Queue의 모든 효과 제거(단 현재 진행 중인 효과는 진행)
  myDiv.clearQueue();
  // 즉시 정지(clearQueue가 실행되지 않으면 현재 queue의 효과만 정지 후 다음 queue를 실행)
  myDiv.stop();
});