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!