Function only animating first time around
Hey guys, I'm a bit of a noob, but I'm just playing around with ideas, and trying stuff out and came across a problem I don't understand. I have an unordered list of links, which on click append a new <li> with the appropriate image, and then slide the whole <ul> left, allowing the image to show through the window. My problem is that after the first time around, the rest of the function executes, but the animate left doesn't. Here's my javascript.
$(document).ready(function() {
$('#showcase_holder ul li:first').addClass("in_view");
$('.copy_area:first').removeClass("hidden").addClass("in_view");
$('#project_subnavigation ul li a').click(function(){
var section = $(this).attr("rel");
var new_image = '../images/port/' + section + '.jpg';
$("#showcase_holder ul").append('<li><img src="' + new_image + '" /></li>');
$("#showcase_holder ul").animate({left: -618}, 500 );
return false;
});
});