JSFiddle - React, Tailwind, and code Playground

by Ashish Mishra

HTML

<button>Start Animation</button>
<button id="done">Stop Animation</button>
<br/><br/>
<div id="box"></div>

CSS

div {
   background:#98bf21;
   height:100px;
   width:100px;
}

JavaScript

$(document).ready(function(){
  $("button").click(function(){
    $("#box").animate({height:'300px',opacity:'0.8'}, 2000);
    $("#box").animate({width:'300px',opacity:'0.6'}, 2000);
    $("#box").animate({height:'100px',opacity:'0.4'},2000);
    $("#box").animate({width:'100px',opacity:'0.2'},2000, function() {
        alert("Have a nice day !");
     });
    
  });
 $("#done").click( function() {
   $("#box").stop(this);
   
  });
});