title: Percentage based width jQuery animation
body: <p>I'm working on a simple sliding panel script for a website where I have 3 categories, each one is a panel but I'm having a hard time using percentage for the width.</p>
  
  <p>I've create d jsfiddle for this: <a href="http://jsfiddle.net/estebanrao/FZ6ea/" rel="nofollow">http://jsfiddle.net/estebanrao/FZ6ea/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="cat-selector"&gt;
      &lt;a href="#" class="cat-s-notebooks"&gt;Notebooks&lt;/a&gt;
      &lt;a href="#" class="cat-s-desktops"&gt;Desktops&lt;/a&gt;
      &lt;a href="#" class="cat-s-smartphones"&gt;Smartphones&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.cat-selector {
      font-size: 0;
      text-align: center;
  }
  .cat-selector &gt; a {
      display: inline-block;
      height: 200px;
      width: 33%;
  }
  .cat-s-notebooks {
      background: red;
  }
  .cat-s-desktops {
      background: green;
  }
  .cat-s-smartphones {
      background: blue;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.cat-selector')
      .on('mouseenter', 'a', function () {
      $(this).animate({
          width: '39%',
      }, 300, 'swing')
      $(this).siblings('a').animate({
          width: '30%',
          opacity: 0.5
      }, 300, 'swing')
  })
      .on('mouseleave', 'a', function () {
      $(this).stop().animate({
          width: '33%',
      }, 300, 'swing')
      $(this).siblings('a').stop().animate({
          width: '33%',
          opacity: 1
      }, 300, 'swing')
  });
  </code></pre>
  
  <p>If you take a look at the example you'll notice that the total width of the 3 panels is always 99%. The thing is that I want this size to always match the closes number to 100% as possible.</p>
  
  <p>I tried using decimals (.33) but it only got worse.
  I also tried getting the total width of the window and make the math from there but it was also a failed attempt.</p>
  
  <p>Is there anything I'm missing to achieve the 100% percentage (or decimal closest)?</p>
  
  <p>Thanks in advance!</p>