JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="sea">
  <div id="fish">
    Fish
  </div>
</div>

<button id="btnStart">시작</button>
<button id="btnStop">멈춤</button>

CSS

#sea {
  width: 600px;
  height: 100px;
}
#fish {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  color: #fff;
}

JavaScript

$(function() {
	$fish = $('#fish');
  var step = 50;
  var timer = 0;
  $('#btnStart').click(function() {
  	if(timer==0) {
    	timer = setInterval(function() {
      	var x = $fish.position().left + step;
        if(x >= 400) {
        	x = 400;
          $fish.css('background-color', 'red');
          step = -50;
        }
        if(x <= 50) {
        	x = 50;
          $fish.css('background-color', 'blue');
          step = 50;
        }
        
        $fish.css('left', x);
      }, 100);
    }
  });
  
  $('#btnStop').click(function() {
  	clearInterval(timer);
    timer = 0;
  });
})