jQuery fadeOut/fadeIn interfereing with jCarousel

Question

I am using fadeOut/fadeIn to fade out a particular DIV and fade in another which contains jCarousel. Once the DIV has faded in, only the first jCarousel Item displays (there are 7 in total), but all other jCarousel elements display correctly. When running jCarousel alone in a separate file, it executes perfectly.

Below is the code I am using for FadeIn as well as jCarousel, all within the tag. The HTML for jCarousel is a standard unordered list, user controlled scrolling through the 7 images. Thanks in advance for any help!

<!--Intro stylesheet-->
<link rel="stylesheet" type="text/css" href="intro.css" />

<!--jQuery library-->
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>

<!--div fade-->
<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#content').delay(2000)
                      .fadeOut(2000, function() { jQuery('#main-area').fadeIn(2000); }
    );
});

</script>

<!--jCarousel library-->
<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>

<!--jCarousel Settings-->
<script type="text/javascript" src="lib/jquery.jcarousel.js"></script>

<!--jCarousel skin & main area stylesheet-->
<link rel="stylesheet" type="text/css" href="skin.css" />

<!--jCarousel Settings-->
<script type="text/javascript" src="lib/jquery.jcarousel.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function() { 
        jQuery('#mycarousel').jcarousel(); 
    });
</script>