How to smooth appearance of divs

Question

How to smooth appearance of divs

Navigation

#1 by (1 votes)

1

In the onload event of my site, I load a function in which it makes a loading gif that was appearing, sum for the content of the site to appear.

<body onload="carregar()">
       <div id="preload">
             <img src="_imagens/loading.gif">
       </div>
       <div id="conteudo">
            //Aqui tem todo o site, cabeçalhos, rodapés, a interface inteira.
       </div>

The function is this:

function carregar(){
            preload = document.getElementById("preload").style.display = 'none';
            div = document.getElementById("conteudo").style.display = 'block';
        }

Only things happen very fast and the effect does not get cool. I would like the gif to disappear with fade of 0.5s and the content would appear with another fade in the same way. I know this is JQuery, I just do not know how to do that.

javascript html jquery css

asked by anonymous 12.11.2016 / 22:21

1 answer

Error "No module named 'pytube'" Resize image to screen size

score 1 · Accepted Answer

You can create a function by hand to make fade ...

It could be something like this:

function fade(el, tipo) {
    for (var i = 0; i <= 100; i++) {
        setTimeout(function(nr) {
            var val = tipo == 'out' ? (100 - nr) / 100 : nr / 100;
            el.style.opacity = val;
            if (tipo == 'out' && nr == 100) el.style.display = 'none';
            else if (tipo == 'in' && nr == 0) el.style.display = 'block';
        }, 10 * i, i);
    }
}

function carregar() {
    fade(document.getElementById("preload"), 'out');
	fade(document.getElementById("conteudo"), 'in');
}
setTimeout(carregar, 500);

div {
    position: absolute;
    left: 50%;
    top: 100px;
}

<div id="preload">Preload</div>
<div id="conteudo" style="display: none;">Conteudo</div>

or do this with CSS classes and transition: opacity 0.5s; , but changing from display: block; to display: none; must be done by JavaScript.