Animated Slideshow Problem

Ok I have a web page on my local server so unfortunately can’t link anyone to it, but if you need me to upload files I will.

Basically I WordPress 3.0 installation and a jQuery slider at the top. Below the image is an “Excerpt” section. Now the image animates and goes to the next image, however the excerpt bit does not. ??

How can I animate the excerpt as well?

Here is the JS file

$(document).ready(function(){

	//This keeps track of the slideshow's current location
	var current_panel = 1;
	//Controlling the duration of animation by variable will simplify changes
	var animation_duration = 1500;

	$.timer(3000, function (timer) {
		//Determine the current location, and transition to next panel
		switch(current_panel){
			case 1:
				$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutQuart', duration: animation_duration});
				current_panel = 2;
				$("#slidecontent").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutQuart', duration: animation_duration});
				current_panel = 2;
			break;
			case 2:
				$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutQuart', duration: animation_duration});
				current_panel = 3;
				$("#slidecontent").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutQuart', duration: animation_duration});
				current_panel = 3;
			break;
			case 3:
				$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutQuart', duration: animation_duration});
				current_panel = 4;
				$("#slidecontent").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutQuart', duration: animation_duration});
				current_panel = 4;
			break;
			case 4:
				$("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutQuart', duration: animation_duration});
				current_panel = 1;
				$("#slidecontent").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutQuart', duration: animation_duration});
				current_panel = 1;
			break;
	  		timer.reset(12000);
		}
	});

});

Here is the PHP file

<div id="slidewindow">		

	<ul id="slideshow">

		<li class="box1"><a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url');?>/images/featuredimages/<?php echo get_post_meta($post->ID, 'FeaturedImage', true); ?>"></a></li>

		<li class="box2"><img src="https://obiaudio:8888/wp-content/themes/custom/images/featuredimages/macaw.jpg"></li>

		<li class="box3"><img src="https://obiaudio:8888/wp-content/themes/custom/images/featuredimages/tiger.jpg"></li>

		<li class="box4"><img src="https://obiaudio:8888/wp-content/themes/custom/images/featuredimages/panda.jpg"></li>

	</ul>

</div>

<div id="slidecontent">

	<h2 class="featuredtitle"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

	<p><?php the_excerpt(); ?></p>

</div>

Last but not least here is a screenshot of my website so you can get an idea for what I am talking about.. https://i26.tinypic.com/125pch1.jpg

The black box underneath the picture should transistion to show the excerpt for the next post, however it doesn’t. The pictures above do though.

The JS is called in another PHP file so that isn’t the problem.

If anyone can help it will be greatly appreciated.