Problems Fading In and Out

I am trying to fade in one div and then fade it out - no issue then I want to fade in a new div in the same spot - no issue as a single effort When I try to combine these two actions, the new div always pops on to the screen with no fade in. The code is below:

<script type="text/javascript">
    $(function () {
        $(document).ready(function () {
            $('#first_body').hide().fadeIn(5000);
            $('#first_body').fadeOut(3000);
            $('#wrapper').delay(500).fadeIn(5000);
        });
    });
</script>

In the css doc I have #wrapper {display:none;}

When I run the #first_body lines of script, it works perfectly. When I run the #wrapper line of script it also works perfectly. The 开发者_开发技巧problem ONLY happens when I combine them. Please help. Thank you :)

---

Use callbacks:

$('#first_body').fadeIn(5000,function(){
    $(this).fadeOut(3000,function(){
        setTimeout(function(){
            $('#wrapper').fadeIn(5000);
        },300);
    });
});