Function at JS, need advice

Hi everyone, I have a short program. I want the div fadeout after 3 second, and then re appear. But I just can't make it re apear. Please help. Thanks the html and JS <body> <div id = "outer"> </div> <script> setTimeout(function(){ document.getElementById("outer").className = "fadeout" },3000); setTimeout(function(){ document.getElementById("outer").className = "fadein" },1000); </script> </bod> and the css : #outer{ width: 500px; height: 500px; position: relative; background-color: #FFA500; opacity: 1; } #outer.fadeout{ transition: opacity 2s; opacity: 0; } #outer.fadein{ transition: opacity 1s; opacity: 1; }

#function #javascritp #opacity

2nd May 2017, 11:21 PM

Anita Putri

1 Answer

+ 10

css: #outer { animation: fadeOut 2s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } js: var outer = document.getElementById('outer'); var faded = false; outer.addEventListener('webkitAnimationEnd', function() { if (!faded) { element.style.animation = "fadeIn 2s"; faded = true; } else { element.style.animation = "fadeOut 2s"; faded = false; } }, false) this might work, I've done something similar in one of my codes.

2nd May 2017, 11:42 PM

The Coding Sloth