javascript - .animate() slider 无法正常工作

Question

我不确定它到底是如何工作的，但我有一个评论 slider ，但它无法正常工作。

如果我点击向左箭头，它会向右滑动一次，这是正确的。当我单击向右箭头时，它会滑回到原来的位置，但之后它不会让我做任何事情。

我只是希望每次点击它时，它都会向左或向右移动750px。

$(document).ready(function(){
    var boxL = $('.box-left');
    var boxR = $('.box-right');

    boxL.click(function(){
     $('.grid-container').animate({"right": 750}, "slow");
    })
    boxR.click(function(){
        $('.grid-container').animate({"left": 0}, "slow");
    })
})

Answer 1

$(document).ready(function(){
    var boxL = $('.box-left');
    var boxR = $('.box-right');

    boxL.click(function(){
        $('.grid-container').animate({"left": "-=50"}, "slow");
    })
    boxR.click(function(){
        $('.grid-container').animate({"left": "+=50"}, "slow");
    })
})

.grid-container
{
  background-color: orange;
  height: 60px;
  margin-bottom: 20px;
  position: relative;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="grid-container">
</div>

<button class="box-left">Left</button>
<button class="box-right">Right</button>