JSFiddle - React, Tailwind, and code Playground

by Junpeng Zhou

HTML

<button id="testbtn1" class="btn">Translate</button>
<button id="testbtn2" class="btn">Reset</button>
<div id="container" style="width: 300px; height: 200px;"></div>

CSS

#container{
	width: 500px;
	height: 500px;
	background: blue;
	margin-top: 50px;
}
.btn{
	width: 80px;
	height: 50px;
}

JavaScript

(function($) {
			var btn1 = $("#testbtn1");
			var btn2 = $("#testbtn2");
			var container = $("#container");

			btn1.on('click', function(e) {
				container.css({
					"transition": "opacity 1s",
					"-webkit-transition": "opacity 1s",
					"-moz-transition": "opacity 1s",
					"-o-transition": "opacity 1s",
					"-ms-transition": "opacity 1s",
					"opacity": "0.1"
				});
				setTimeout(function() {
					container.css("display", "none");
				}, 1000);
			});
			btn2.on('click', function(e) {
				container.css("display","block");
				container.css("display");
                container.css("opacity","1");
			});
		})(jQuery);