How to get a blur in effect after a blur out effect on an underlying Div

Question

I have put together a blur out/in effect for a landing page. However it is not quite working how it is supposed too and i am not sure why.

It blurs out fine, The problem lies on when i want the underlying Div to appear, i would like that to "fade in", as it stands it just appears after the fade out has finished.

Here is a snippet:

 splash = document.getElementById('intro'); content = document.getElementById('content'); function enterSite (element) { opac = 1; fps = 1000/30; function decrease() { opac -= 0.02; if (opac <= 0.1){ splash.style.display = 'none'; return true; } splash.style.opacity = opac; setTimeout(decrease,fps); } function increase() { opac += 0.02; if (opac >= 0.1){ content.style.display = 'block'; return false; } content.style.opacity = opac; setTimeout(increase,fps); } decrease(), increase(); }

 html, body { overflow: hidden; } main { width: 100%; height: 100vh; position: relative; } #intro { background-image: url(Images/splash.jpg); background-repeat: no-repeat; background-size: cover; display: flex; text-align: center; height: 100vh; } #splash { margin: auto; width: 40%; background-color: rgba(56,56,56,0.4); border-radius: 50px 50px; } #splash-p { width: 70%; font-size: 1.2em; line-height: 1.5em; margin: auto; text-align: center; padding-top: 10px; color: #fff; } .btn { width: 35%; margin: auto; margin-top: 10px; margin-bottom: 10px; } /* Main Content Page */ article { position: absolute; height: 100vh; background-color: red; }

 <main> <div id="intro"> <div id="splash"> <p id="splash-p">Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing.</p> <input type="image" src="Images/Button.png" class="btn" onclick="enterSite()"> </div> </div> <article id="content"> Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing, </article> </main>

Answer 1

I think you could benefit from breaking things out a little bit more and not nesting so many functions and calls. Also, it may be helpful to use a setInterval() instead of repeating setTimeout() .

splash = document.getElementById('intro');
content = document.getElementById('content');
var fadeOut = null;
var fadeIn = null;
opac = 1;
fps = 1000/30;

function increase() {
    content.style.opacity = opac;
    opac += 0.02;

    if (opac >= 1){ //Opacity is 100%
      window.clearInterval(fadeIn); //Stop fade-in
    }

}

function decrease() {
    splash.style.opacity = opac;
    opac -= 0.02;

    if (opac < 0.1){ //If object is almost gone
        splash.style.display = 'none'; //Hide it completely
        window.clearInterval(fadeOut); //Stop fade-out

        content.style.display = 'block'; //Set up new content
        content.style.opacity = 0;
        fadeIn = setInterval(increase, fps); //Begin fade-in

    }
}

function enterSite () {
    fadeOut = setInterval(decrease, fps); //Start the fadeout
}

JSFiddle