title: jQuery - preventing animation from repeating without validation (simplecart js)
body: <p>I'm new to jQuery so apologies if the answer is basic.</p>
  
  <p>I'm trying to develop a simplecart js shelf for my own site. Before an item can be added to the cart, a size (of a product) must be selected. When added to the cart, the item then flies in. After which even if a product size is not selected, the product still carries out the flying animation.</p>
  
  <p>I'd like to make it so the animation only occurs when a size option is selected (and, preferably, only when the 'Add to cart' link is clicked).</p>
  
  <p><a href="http://peaknature.co.uk/cart" rel="nofollow">Here's what I have so far</a></p>
  
  <p>With the jQuery:</p>
  
  <pre><code>// Items flys to cart
      $(".tooltip .item_add").click(function(){
          $(".simpleCart_shelfItem").click(function(){
              var clone = $(this).clone(),
              position = $(this).position(),
              bezier_params = {
              start: {
                x: position.left,
                y: 0, 
                angle: -90
              },  
              end: { 
                x:470,
                y:-100, 
                angle: 180,
                length: .2
              }
            };
  
          clone.appendTo('.shelf');
          clone.find('.tooltip').hide();
          clone.addClass('addDemoAnimation');
          clone.animate({path : new $.path.bezier(bezier_params)}, 600);
          });
      });
  </code></pre>