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?

[DrFaust]

A mayor Z-Index, más "arriba" está el elemento.

[paxarin]

Iniciado por DrFaust

A mayor Z-Index, más "arriba" está el elemento.

Ya probe a cambiarlos, por ejemplo:
#logoinicio{z-index:200;}
#wrapper{z-index:100;}
Indicar que el wrapper es el contenedor de toda la web.
Pero sigue igual, para que me entiendan. Ahora mismo cuando carga la pagina en la parte superior aparece el div #logoinicio que hace su FadeOut y su fadeIn, pero en la parte inferior aparece la web y cuando desaparece el logo la pagina salta y esto es lo que quiero evitar.

[paxarin]

No obstante alguien sabria decirme si existe alguna forma de poder hacer una pagina de la web con el logo y que luego cuando desaparezca se cargue el index?