JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

CSS

.wrap  {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #000000;
}
.wrap div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: red;
}
.wrap .box1 {
  z-index: 5;
  background: green;
  opacity: 0;
}
.wrap .box1.active {
  opacity: 1;
}

JavaScript

$('.box1').on('click', function(){
	console.log($('.box1'))
	$('.box1').animate({opacity: 1}, 3000);
	  setTimeout(function(){
	    $('.box1').animate({
	    opacity: 0
	    }, 5000)
	  }, 6000)
})