title: Add/Subtract 100% of left attribute doesnt work
body: <p>So I got an element with the following CSS:</p>
  
  <pre><code>top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  border-radius: 0;
  box-shadow: none;
  transition: all .3s ease-in-out;
  </code></pre>
  
  <p>On click I am trying to add/subtract <code>100%</code> from the <code>left</code> property depending on which button is clicked:</p>
  
  <pre><code>$('.next, .prev').click(function() {
     if ($(this).hasClass("next")) {
      $(".element").animate({
        left: '-=100%'
      }, 500);
     }
     else if ($(this).hasClass("prev")) {
      $(".element").animate({
        left: '+=100%'
      }, 500);
     }
  });
  </code></pre>
  
  <p>When I click one of the buttons, it works fine, but on the 2nd press, it jumps to a percentage, which doesn't makes sense to me, i.e. <code>1002.22%</code>, <code>-802.222</code>, ...</p>
  
  <p>You got a full example <a href="https://codepen.io/tobiasglaus/pen/WXXJoK" rel="nofollow noreferrer">here</a> after clicking an element to open the content.</p>
  
  <p>Does anyone know why it's not acting the way I want to?</p>