JQuery :: Starting Second Animation Stops First One?

I have some links on my page with ajax calls, and the callback animates the links. My problem is, if I quickly click on two of them, the first one will begin to animate (ajax will complete successfully), and then when I click on the second one, the first one will stop animating, and only the second one will finish.

// document.ready
/* behavior for add to cart button */
$('a.item-addCart').live('click', function() { addToCart($(this)); } );
function addToCart(button){
/* parse data from button clicked, corresponding quantity box, and hidden price field */
$item_id = button.attr('id').split('-')[2];
$item_qty = $('input#item-addCartQuantity-'+$item_id).val();
$item_price = $('input#item-addCartPrice-'+$item_id).val();
/* set loading notification */
$('div#item-addCartActions-'+$item_id).html('<img src="/images/ajax-loader.gif" />');
/* AJAX */
$('div#item-addCartActions-'+$item_id).load(
'shopping_cart/add',
{item_id: $item_id, item_qty: $item_qty, item_price: $item_price},
function(responseText){
/* show response text */
$('div#item-addCartActions-'+$item_id).html(responseText);
/* pause on response text for 2 seconds */
$('div#item-addCartActions-'+$item_id).animate({opacity: 1.0}, 2000, function(){
/* fade out response text */
$('div#item-addCartActions-'+$item_id).animate({opacity: 0}, 'slow', function(){
/* show link to shopping cart */
$('div#item-addCartActions-'+$item_id).html('<a href="shopping_cart">Item in cart</a>').css('opacity', 1);
})});});}