jQuery fadeOut/fadeIn conflict with jCarousel

jQuery fadeOut/fadeIn conflict with jCarousel

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

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

<!--Intro page 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 stylesheet-->
<link rel="stylesheet" type="text/css" href="skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
 jQuery('#mycarousel').jcarousel();
});

</script>