100%加减左属性无效

因此,我得到了一个具有以下CSS的元素:

top: 0;
left: 0;
width: 100%;
height: 300px;
border-radius: 0;
box-shadow: none;
transition: all .3s ease-in-out;

单击时,我正在尝试添加/减去 100% 从 left 属性,具体取决于单击的按钮:

$('.next, .prev').click(function() {
   if ($(this).hasClass("next")) {
    $(".element").animate({
      left: '-=100%'
    }, 500);
   }
   else if ($(this).hasClass("prev")) {
    $(".element").animate({
      left: '+=100%'
    }, 500);
   }
});

当我点击其中一个按钮时,效果很好,但在第二次按下时,它会跳到一个百分比,这对我来说没有意义,即。 1002.22% , -802.222 , ...

你有一个完整的例子 here 单击元素以打开内容后。

有人知道为什么它没有按照我想要的方式行事吗?