Fade_In_Then_Out_HIDDEN

by greatCar

HTML

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

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


<div id="thing" class="thing ">I toggle m-fadeOut</div>
<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 {
  opacity: 0;
}
.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 2000ms, opacity 2000ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 2000ms;
}

JavaScript

var tog = document.getElementById("tog");
var thing = document.getElementById("thing");
var thing2 = document.getElementById("thing2");

tog.addEventListener("click", function() {
  
//thing2.classList.toggle("m-fadeOut");
 thing2.classList.toggle("m-fadeIn");
  
});


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");

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

//alert("has class in");
}else{
  toggleFadeInOut();
setTimeout(function(){
    toggleFadeInOut();
}, 3000);
// thing2.classList.toggle("m-fadeIn");
//thing2.classList.toggle("m-fadeOut");

}
});

function toggleFadeInOut(){
 thing2.classList.toggle("m-fadeIn");
thing2.classList.toggle("m-fadeOut");
}