Loading page with Jquery

Good afternoon, friends,

I was doing the following process to display my page when I fully loaded it:

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

I used .addClass to put the class .bye-bye where it contains an animation that subtracts the <div> that occupies the entire screen. So far, okay! As I'm using the following 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;
}

Well, here's the problem, as I'm using opacity: 0; the screen just becomes transparent, to try to fix I've added the .hide(done) . .hide() works, but it cuts my animation in half.

Well I wanted to give you a help, fixes, solutions, if I'm not doing the load, how should I proceed?

Hugs to all!