Fade_In_Then_Out_HIDDEN

by greatCar

HTML

<button id="tog2">toggle them fancy classes</button>


<div id="thing2" class="thing thing2">I toggle m-fadeIn</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex delectus velit vero voluptatum fugiat quis, nobis beatae accusamus similique quod unde explicabo consequuntur, maxime labore natus non corporis ab odio.</p>

CSS

body {
  padding: 20px;
}

.thing {
  margin: 20px;
  padding: 20px;
  background: lightyellow;
  border: 1px solid green;
}
.thing2 {
  visibility:hidden;
  opacity: 0;
}
.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s ease 2000ms, opacity 2000ms;
  -moz-transition:  visibility 0s ease 2000ms, opacity 2000ms;
  -webkit-transition:  visibility 0s ease 2000ms, opacity 2000ms;
  
  
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s ease 0s, opacity 2000ms;
  -moz-transition: visibility 0s ease 0s, opacity 2000ms;
  -webkit-transition: visibility 0s ease 0s, opacity 2000ms;
  
}

JavaScript

var tog = document.getElementById("tog");
var thing = document.getElementById("thing");
var thing2 = document.getElementById("thing2");
function toggleFadeInOut(){
 thing2.classList.toggle("m-fadeIn");
thing2.classList.toggle("m-fadeOut");
}



tog2.addEventListener("click", function() {
  
//  thing.classList.toggle("m-fadeIn");
// thing.classList.toggle("m-fadeOut");
if(!thing2.classList.contains("m-fadeIn") && !thing2.classList.contains("m-fadeOut") ){
 thing2.classList.toggle("m-fadeIn");

}else{
  toggleFadeInOut();
}

setTimeout(function(){
    toggleFadeInOut();
}, 3000);


});