JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<button>start animation</button>
<p>&nbsp;</p>
<div class="greenbox">
HI
</div>

CSS

.greenbox {
	background-color: #396;
	height: 100px;
	width: 100px;
	position: absolute;
	text-align:center;
	color:#FFF;
}

JavaScript

$(document).ready(function() {
    $("button").click(function() {
		
		var div=$("div");
		div.animate({left:'500px',height:'300',opacity:'0.5'},"slow");
		div.animate({width:'300',opacity:'0.5',fontSize:'3em'},"slow");
		div.animate({height:'100',opacity:'0.8'},"slow");
		div.animate({width:'100',opacity:'1',left:'2px',fontSize:'1em'},"slow");
		
		
//		$(".greenbox").animate({
//			//height:'toggle'
//			
//			//left:'250px',
////			opacity:'0.5',
////			height:'+=150px',
////			width:'+=150px'
//
//        
//    });
//	
});

});