Simples FadIn and FadOut with CSS e JS

by Lucas Silva

HTML

<button id="fadin">FadIn</button>
<button id="fadout">FadOut</button>

<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="black"></div>

CSS

div{
  height: 50px;
  width: 100%;
  display: block;
  float: left;
}

#red{
  background: red;
}

#blue{
  background: blue;
  height:0;
  transition: 1s;
}

#green{
  background: green;
}

#black{
  background: black;
  height:0;
  transition: 1s;
}

.fadIn{
  height: 50px !important;
}

JavaScript

function applyFadIn(){
  document.getElementById("blue").className="fadIn";
  document.getElementById("black").className="fadIn";
}

function applyFadOut(){
	document.getElementById("blue").className="";
  document.getElementById("black").className="";
}

document.getElementById("fadin").addEventListener("click", applyFadIn);
document.getElementById("fadout").addEventListener("click", applyFadOut);