title: SimpleCart JS change color of cart according to quantity
body: <p>I'm having trouble trying to use the simpleCart JS events to produce an effect that changes color of the shopping cart according of quantity. </p>
  
  <p>Essentially I am trying to achieve a function like this:
  <a href="http://shop.hotelcostes.com/en/music/26-hotel-costes-1.html" rel="nofollow">http://shop.hotelcostes.com/en/music/26-hotel-costes-1.html</a></p>
  
  <p>By using simpleCart js:
  <a href="http://simplecartjs.org/documentation" rel="nofollow">http://simplecartjs.org/documentation</a></p>
  
  <p>I have two scripts so far that work but are not ideal</p>
  
  <pre><code>simpleCart.bind( "afterAdd" , function( item ){
      if(simpleCart.quantity() &gt; 0){
          simpleCart.$("#cart").attr( "style" , "color:red" );
  }
  });
  
  
  simpleCart.bind( "ready" , function( item ){
      if(simpleCart.quantity() &gt; 0){
          simpleCart.$("#cart").attr( "style" , "color:red" );
  }
  });
  </code></pre>
  
  <p>The problems:</p>
  
  <ol>
  <li><p>The script with the 'afterAdd' function changes color of the cart normally but when I add the .hide() and .fadeIn() effects the add function continues to work however the hide, fadeIn, or add color effects don't work.</p></li>
  <li><p>SimpleCart only provides an event called 'beforeRemove' but what I really need is some sort of function 'afterRemove' event that recognizes when the quantity reaches 0 and changes the color of the cart accordingly. </p></li>
  </ol>
  
  <p>Any help would be appreciated. Thank you.</p>