javascript - 单击可左右移动内容

我正在尝试使用点击事件左右移动内容，需要在左边或右边的空白处停止。动态生成。这是我试过的代码，但不值得。根据我的代码，它正在左右移动容器。但我需要左右移动。
我该怎么做呢。？

function moveList(px) {
  $('.list').animate({
    'marginLeft': px
  });
}

.list {
  white-space: nowrap;
  overflow: auto;
  height: 85px;
  padding: 10px 0;
  margin: 25px 0;
  position: relative;
}
.list-item {
  display: inline-block;
  min-width: 20%;
  max-width: 150px;
  padding: 10px 0;
  border-radius: 3px;
  background: #eee;
  border: 1px solid #ddd;
  margin: 0 5px;
  cursor: pointer;
  text-align: center;
}
#right-arrow {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  right: 0;
  top: 35px;
  z-index: 999;
  border-radius: 50%;
  background: url(img/right-arrow.png) no-repeat #000;
}
#left-arrow {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  left: 0;
  top: 35px;
  z-index: 999;
  border-radius: 50%;
  background: url(img/left-arrow.png) no-repeat #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right-arrow" onclick="moveList('-=50px')"></div>
<div id="left-arrow" onclick="moveList('+=50px')"></div>

<div class="list">
  <div class="list-item">1</div>
  <div class="list-item">2</div>
  <div class="list-item">3</div>
  <div class="list-item">4</div>
  <div class="list-item">5</div>
  <div class="list-item">6</div>
  <div class="list-item">7</div>
  <div class="list-item">8</div>
  <div class="list-item">9</div>
  <div class="list-item">10</div>
</div>

最佳答案

试试这样的脚本：

function moveList(px) {
  $(".list-item:first-child").animate({
    'marginLeft': px
  });
}