Hello, 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.  Is this normal behavior?

1. // document.ready
2.   /* behavior for add to cart button */
     $('a.item-addCart').live('click', function() { addToCart($(this)); } );
   
   

1. 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);
           })
         });
       });
   
     }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Hope that was clear.  Thanks.