How to have an element fade out and another element fade in in its place on window load?

Question

I am trying to create a splash screen for my website and I have made a progress bar to make it look nicer. I also have some links for the user to login or register.

What I want to achieve is, right after the window loads, have the progress bar do its thing for 4 seconds then have it fade out in .5 seconds and then have the links fade in in its place in .5s for a total of 5 seconds before the user can proceed.

I have put together some code to make this work using mainly:

setTimeout();

but despite having no errors as far as both I and the Google Chrome console can tell, no visible result is produced.

How can I fix my code to work properly? Any suggestions would be greatly appreciated. I would prefer a solution in plain JavaScript, but if there's no other way, I would be satisfied with a jQuery one too.

To help you, I have assembled a demo for you here .

Answer 1

No doubt to switch to jquery. FadeIn and fadeOut do it easily:

 $(window).load(function(){ var t=setTimeout(function(){ $("#progressbar").fadeOut(500); $("#splashscreen-links").fadeIn(500); },4000) }) 

 @-webkit-keyframes greenglow { from { left:-120px; } to { left:100%; } } @-moz-keyframes greenglow { from { left: -120px; } to { left: 100%; } } @-ms-keyframes greenglow { from { left: -120px; } to { left: 100%; } } @-o-keyframes greenglow { from { left: -120px; } to { left: 100%; } } @keyframes greenglow { from { left: -120px; } to { left: 100%; } } #progressbar { /* Dimensions */ width: 250px; height: 16px; overflow: hidden; /* Positioning */ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 5px; padding-top: 4px; padding-left: 17px; /* Styling */ background: #E6E6E6; border:1px solid #bbb; border-radius:0px; } #progressbar:after { content: " "; display: block; width: 120px; top: -50%; height: 250%; position: absolute; animation: greenglow 2s linear infinite; -webkit-animation: greenglow 2s linear infinite; z-index: 2; background: #1CAE30; } #splashscreen-links { /* Text */ color: #999999; font-family: "Arial"; text-decoration: none; /* Positioning */ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 5px; padding-top: 4px; padding-left: 17px; /* Visibility */ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="progressbar"></div> <p id = "splashscreen-links"><a>Login</a>&nbsp;&bull;&nbsp;<a>Register</a></p> 

Answer 2

You are already using CSS animations. Just keep going down that path!

@keyframes progresshide {
  0% {opacity: 1; display:block;  }
  80% { opacity: 1; }
  100% { opacity: 0; display:none; }
}

@keyframes linksshow {
  0% {opacity: 0;  }
  80% { opacity: 0; }
  100% { opacity: 1;  }
}

#progressbar {
  animation: progresshide 5s linear forwards;
}
#splashscreen-links {
  animation: linksshow 5s linear forwards;
}

https://jsfiddle.net/bcwtz8rr/3/

Answer 3

In the case that you'd rather go JS than JQuery, it is still possible using .className to switch the class, setting up classes with transitions of the .5s you mentioned, and using setTimeout appropriately.

First, we start by introducing another two rather simple classes:

     .showObject {
        transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        opacity: 1;
}
.hideObject {
    transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        opacity: 0;
}

Then, JS with appropriate setTimeout usage:

window.onload = function SwitchProgress() {

// Declaration
'use strict';

// Fade in
document.getElementById('progressbar').setAttribute('style', 'display: block;');
document.getElementById('progressbar').className = 'showObject';

// Waiting 4s for bar animation, then fading it out
setTimeout(function () {
    document.getElementById('progressbar').className = 'HideObject';

    // .5s while the bar fades out, removing bar, displaying links 
    setTimeout(function () {
        document.getElementById('progressbar').setAttribute('style', 'display: none;');
        document.getElementById('splashscreen-links').setAttribute('style', 'display: block;');
            // .01s for display change, links fade in
            setTimeout(function () {
                document.getElementById('splashscreen-links').className = 'showObject';
            }, 10);
    }, 990);
}, 4000);

};

Just wanted to note: I got this to work on Codecademy (codebits), which refreshes the file every time you make a change. JSFiddle didn't work as well. Should be fine for usage on a page that's actually going to experience proper onload execution.