JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<div id="first-div" class="divs"></div>
<div id="second-div" class="divs"></div>
<div id="third-div" class="divs"></div>
<button id="btn">animate</button>

CSS

.divs{
  display:block;
  width:150px;
  height:100px;
  margin-bottom:5px;
  background-color:orange;
}
#second-div{background-color:tomato;}
#third-div{background-color:skyblue;}

JavaScript

var toggleFlag = true;

$('#btn').on('click', function(){
	var op = (toggleFlag) ? 0 : 1;
	$('#second-div').css({'opacity': op, 'transition':'opacity 0.5s'});
  toggleFlag = !toggleFlag;
});