I am completing a JQuery assignment for school that has me stumped...
Everything works properly except one thing... The large image that is displayed above the carousel fades out and eases to the left when you click on the next image in the carousel. The next image is supposed to load in the window by easing in from the right and fading in from opacity 0 to opacity 1. Something about how I coded it is not working. Any help is greatly appreciated.

The HTML
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Carousel Animation</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="carousel.js"></script>
</head>

<body>   
<section>
    <h1>View our Books</h1>
    <img id="image" src="images/book1.jpg" alt="SQL Server 2008 for Developers">
    <div id="carousel">
        <div id="left_button" class="button_panel"><img src="images/left.jpg" alt=""></div>
        <div id="display_panel"> 
            <ul id="image_list">
                <li><a href="images/book1.jpg"><img src="images/book1.jpg" alt="SQL Server 2008 for Developers"></a></li>
                <li></li>
                <li><a href="images/book3.jpg"><img src="images/book3.jpg" alt="Visual Basic 2010"></a></li>
                <li><a href="images/book4.jpg"><img src="images/book4.jpg" alt="ADO.NET 4 database programming with VB 2010"></a></li>
                <li><a href="images/book5.jpg"><img src="images/book5.jpg" alt="ASP.NET 4 web programming with VB 2010"></a></li>
                <li><a href="images/book6.jpg"><img src="images/book6.jpg" alt="Oracle SQL and PL/SQL"></a></li>
                <li><a href="images/book7.jpg"><img src="images/book7.jpg" alt="Java Servlets and JSP"></a></li>
                <li><a href="images/book8.jpg"><img src="images/book8.jpg" alt="C# 2010"></a></li>
                <li><a href="images/book9.jpg"><img src="images/book9.jpg" alt="ASP.NET 4 web programming with C# 2010"></a></li>
            </ul>
        </div>
        <div id="right_button" class="button_panel"><img src="images/right.jpg" alt=""></div>
    </div>
</section>
</body>
</html>
The CSS
Code:
article, aside, figure, footer, header, nav, section {
    display: block;
}
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
	margin: 0 auto;
	width: 410px;
	height: 480px;
	border: 2px solid blue;
}
section {
	padding: 20px 0;
}
h1 {
	font-size: 140%;
	text-align: center;
	margin-bottom: .5em;
}
#image {
	height: 250px;
	margin-bottom: 1em;	
	margin-left: 105px;
}
/* the styles for the carousel */
.button_panel	{
	height: 125px;
	padding: 50px 15px;
	float: left;
}
.button_panel img {
	width: 25px;
	height: 25px;
}
#display_panel {
	height: 125px;
	width: 300px;
	overflow: hidden;
	float: left;
}
#image_list {
	left: 0px;
	position: relative;   
    width: 900px;
    list-style: none;  
}
#image_list li	{
	float: left;
	width: 100px;
}
#image_list li img	{
	width: 95px;
	
}
HTML 5 Shiv
[CODE]


THE JQUERY IN QUESTION
Code:
$(document).ready(function() {
	
	var slider = $("#image_list");                     // slider = ul element
	var leftProperty, newleftProperty;
		
	// the click event handler for the right button						
	$("#right_button").click(function() { 
		// get value of current left property
		leftProperty = parseInt(slider.css("left"));
		// determine new value of left property
		if (leftProperty - 300 <= -900) {
			newLeftProperty = 0; }
		else {
			newLeftProperty = leftProperty - 300; }
		// use the animate function to change the left property
		slider.animate( {left: newLeftProperty}, 1000);
	});  // end click
	
	// the click event handler for the left button
	$("#left_button").click(function() {
		// get value of current right property
		leftProperty = parseInt(slider.css("left"));
		
		// determine new value of left property
		if (leftProperty < 0) {
			newLeftProperty = leftProperty + 300;
		}
		else {
			newLeftProperty = 0;
		}
		
		// use the animate function to change the left property
		slider.animate( {left: newLeftProperty}, 1000);				
	});  // end click	
	
	
	//Large image swap
	
	//preload images
	$("#image_list li").each(function(){
		var swappedImage = new Image();
		swappedImage.src = $(this).attr("href");
		
	}
	);
	//end preload
	
	
	$("#image_list li a").click (function(evt){
		var imageURL = $(this).attr("href");
		$("#image").attr("src",imageURL);
		evt.preventDefault();
		
		//Large image animation
		//current image leaving
		$("#image").animate({opacity: 0, left: -205,}, 1000);
		$("#image").css("position", "relative");
			
		
		//new image entering
		$("#image").next("#image").animate({opacity: 1,}, 1000);
		$("#image").css("position", "relative");
		
		
		
		
		
		
		}); //end li click function Large image swap
	
}); // end ready