How to smooth appearance of Ivds

Asked

Viewed 193 times

1

At the event onloadfrom my site, I carry a function in which makes a loading gif that was appearing, so that the content of the site appears.

<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>

That’s the job of:

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

It’s just that things happen so fast, and the effect doesn’t look good. I would like gif to disappear with 0.5s "fade" and content to appear with another fade in the same way. I know this is Jquery, I just don’t know how to do this effect.

javascript jquery html css

  • How are you creating site content? Is it static HTML? What space does that take loading.gif? the whole screen as a layer over the site?

  • It’s static HTML, and this loading.gif is centered in the middle of the screen, but is only 200x200 px.

  • 1

    If using jQuery is very easy because everything is ready, just use $('#conteudo').show("slow"), You can see more examples here: http://api.jquery.com/show/

1 answer

1


You can create a function by hand to 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 the change of display: block; for display: none; has to be done by Javascript.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.