jQuery的溅不褪色的 - 但淡出

Question

I'm currently trying to get this splash page to fade in, then fade out. However, it is just fading out, not fading in.

Here is the code:

    <script type="text/javascript">
    $(document).ready(function(){
$('.all').hide(); 
$('#surprisesplash').fadeIn(1500)
});
$(function(){
   setTimeout(function() {
     $('#surprisesplash').fadeOut(1000, function() {
     $('.all').fadeIn();
  });
 }, 3000);
});
</script>

and here is the website.

I'm quite new at this, and still getting to grips. Any help on syntax or any of the like would also be appreciated.

Tom :)

This is the css

#surprisesplash {

    width:850px;
    height:621px;
    left:50%;
    top:50%;
    margin-top:-310.5px;
    margin-left:-425px;
    position:fixed;

    }

.all {
    display:none;

    }

html:

  <div id="surprisesplash"><img src="/surprise2.png"></div>

    <div class ="all">

    <div id = "header">
        <div id = "music">Camelot</div>         
        <div id = "about"><a href="#">About</a></div>
        <div id = "contact"><a href="#">Contact</a></div>
        </div>
        <div id = "musicinfo">

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
        Donec eu libero sit amet quam egestas semper. 
        Aenean ultricies mi vitae est. 
        Mauris placerat eleifend leo.</p></div>

        <div id = "aboutinfo">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
        Donec eu libero sit amet quam egestas semper. </p></div>

            <div id = "contactinfo">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget. </p></div>

        </div>

Answer 1

It should work!

<script type="text/javascript">

    $('.all').hide();
    $('#surprisesplash').fadeIn(1500);

    setTimeout(function() {

        $('#surprisesplash').fadeOut(1000, function() {
            $('.all').fadeIn(1500);    
        });

    }, 3000);

    </script>

JsFiddle

Answer 2

You should probably at least wait until it's finished fading in before you start fading out:

<script type="text/javascript">
    $(function(){
        $('.all').hide(); 
        $('#suprisesplash').fadeIn(1500, function() {
            $(this).delay(1500).fadeOut(1000, function() {
                $('.all').fadeIn();                     
            });
        });
    });
</script>