preloading page javascript - smooth fade out

Question

I have done some youtube tutorial about preloading page it worked but my only problem is the transition from preloading page to the main content NO smooth fade out or so what ever....

this is my index page

<!DOCTYPE html>
<head>
    <title>Loading animation</title>
    <link rel="stylesheet" href="style.css" />
    <script>
        window.addEventListener("load", function() {
            var leaving = document.getElementById("leaving");
            document.body.removeChild(leaving);
        });
    </script>
</head>
<body>
    <div id="leaving" class="loading">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>   
    </div>
</body>
</html>

and my CSS

html {
    background: #abf971;
    margin: 0;
    padding: 0;
}
.loading {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(53, 53, 53);
    border: 0px solid #ffffff;
    position: fixed;
    top: 0;
    left: 0;
}
ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    display: flex;
}
ul li {
    list-style: none;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    animation: animate 1.5s ease-in-out infinite;
}
@keyframes animate {
    0%, 20%, 40%, 80%, 100% {
        transform: scale(0.01);
    }
    40% {
        transform: scale(1);
    }
}
ul li:nth-child(1) {
    animation-delay: -1.4s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(2) {
    animation-delay: -1.2s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(3) {
    animation-delay: -1s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(4) {
    animation-delay: -0.8s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(5) {
    animation-delay: -0.6s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(6) {
    animation-delay: -0.4s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(7) {
    animation-delay: -0.2s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(8) {
    animation-delay: 0s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}

so my question is.. what will i have to add to this

<script>
    window.addEventListener("load", function() {
        var leaving = document.getElementById("leaving");
        document.body.removeChild(leaving);
    });
</script>

to make it fade out smoothly.... im kind of hesitant to put time on it because what if the my connection is so slow that it exceeds the time...

Thanks

You actually expect us to follow some external link tutorial in order to help you? Provide minimal example. Currently you are missing CSS and HTML in your code. I also see some inconsistency between naming: `getElementById` and ID that is `loadingClass` — Justinas, Jun 30 '18 at 21:06

Unmitigated · Answer 1 · 2018-07-12T21:41:52.393

0

With jQuery, it can be done like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
<script>
window.addEventListener("load", function() {
     //# is used to represent id in jQuery
     //"slow" sets the speed of the animation 
     //jQuery works in nearly all browsers as its developers wrote it for 
     //high performance in all browsers
    $('#leaving').fadeOut("slow", function(){
     //callback function to be performed after the animation is complete
  });
});
</script>

As Justinas suggested, the proper syntax in complete jQuery would be this:

<script>
$(window).load(function(){
    $('#leaving').fadeOut("slow", function(){
     //do something after animation is complete
  });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).load(function(){
    $('#leaving').fadeOut("slow", function(){
     //do something after animation is complete
  });
});
</script>
<div id="leaving" style="border: 1px solid black; width: 100px; height: 50px; position: fixed; z-index: 1000;"></div>

edited Jul 12 '18 at 21:41

answered Jun 30 '18 at 21:08

Unmitigated

76,500
11
62
80

So why not `$(window).load(function () {})` too then? – Justinas Jul 01 '18 at 13:36
@Justinas I thought nekomancer would be more familiar with what he/she had already written (making minimal changes to it), but you're right, that is how it should be writtten in jQuery. I edited my answer per your suggestion. – Unmitigated Jul 01 '18 at 15:38
@hev thanks for the response... after that fade i want the whole div to be completely gone because its z-index is on the very top an if i just use clearInterval() the div stays on the top and i can't click anything on the screen – nekomancer Jul 12 '18 at 21:24
@nekomancer Check the code snippet I added. Is it what you want? – Unmitigated Jul 12 '18 at 21:42
@hev1 my bad, got a typo on the script src.. it works now.. thank you :) – nekomancer Jul 12 '18 at 22:10

preloading page javascript - smooth fade out

1 Answers1