Problemilla con fadeOut, FadeIn y Z-index

[paxarin]

Problemilla con fadeOut, FadeIn y Z-index
muy buenas.
Estoy haciendo un diseño de una web y ahora me piden despues de tener diseñado todo el index que si les podria hacer que cuando cargue la web se vea una pagina con su logo con un fundido y que luego aparezca el index.
Estuve usando es javascript
<script type="text/javascript">
$(document).ready(function(){
$("#logoinicio").fadeOut(0,function(){ $(this).fadeIn(4000); });
$("#logoinicio").fadeIn(0,function(){ $(this).fadeOut(4000); });
$("#wrapper").fadeOut(0,function(){ $(this).fadeIn(10000); });
});
</script>
usando tambien una libreria de jquery 1.6.2
para el css:
#logoinicio{position:relative;left:50px;top:0px; z-index:100;}
#wrapper{ width:980px; margin:0 auto; z-index:200;}
Pero cuando se carga la intro aparece debajo el resto de la web cargando tambien y una vez desaparece el logo toda la web salta hasta su posición.
Alguien puede decirme el por que?