Angel Politis Angel Politis - 6 months ago 17
jQuery Question

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

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

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>