2

Boa tarde amigos,

Eu estava fazendo o seguinte processo para exibir minha página quando feito o carregamento completo da mesma:

<script>
      $(document).ready(function(){
            $('.carregado').addClass( 'bye-bye' ).hide('done');
        });
</script>

Utilizei o .addClass para colocar a classe .bye-bye onde ela contém uma animação que faz sumir a <div> que ocupa a tela inteira. Até aqui ok! Como estou usando o seguinte css:

.bye-bye{
    opacity: 0;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out; 
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out; 
    transition: all 1s ease-out;
}

Bom, aqui está o problema, como estou usando o opacity: 0; a tela apenas fica transparente, para tentar corrigir adicionei o .hide(done). O .hide() funciona, porem ele corta a minha animação na metade.

Bom eu queria de vocês um help, correções, soluções, caso eu não esteja fazendo certo o load, como devo proceder?

Abraço a todos!

2 Respostas 2

1

Outra opção é utilizar o recurso .load() do jQuery:

$(window).load(function() {
    $(".loader").fadeOut("slow");
})

Após a janela carregar, o elemento com a classe .loader desaparece.


@atualização:

Os métodos .load, .unload e .error estão depreciados desde a versão 1.8 do jQuery.

Solução atual .on('load', function(){...}):

$(window).on('load', function() {
    $(".loader").fadeOut("slow");
});
1

Colocar um .hide() é o mesmo que você fazer display:none. E display não funciona em animações.

Coloque na sua classe CSS uma propriedade:

visibility:hidden

Faz a mesma função do display, porém, não deleta o elemento do DOM.

E apaga o .hide() da função do jQuery.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .