Javascript .animate（）滑块工作不正常

我不确定这到底是如何工作的，但我有一个审查滑块，它就是不能正常工作

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

我只是想要它，所以每次单击它时，它都会向左或向右移动

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");
    })
})

$（文档）.ready（函数（）{
变量boxL=$（'.box left'）；
var-boxR=$（'.box right'）；
boxL.单击（函数（）{
$（'.grid container'）.animate（{“left”：“-=50”}，“slow”）；
})
单击（函数（）{
$（'.grid container'）.animate（{“left”：“+=50”}，“slow”）；
})
})

.grid容器
{
背景颜色：橙色；
高度：60px；
边缘底部：20px；
位置：相对位置；
宽度：100px；
}

左边
右键

然后删除该项。然后，您需要增加向左/向右滑动的数量，或者在幻灯片结束后，您需要重新排列项目并重置css，以便再次播放幻灯片。感谢信息