javascript - .animate() 左侧位置减少，将容器中的所有元素更改为相同值

Question

我正在尝试创建一个非常基本的滑动轮播，用户可以向左或向右导航。我使用的脚本会自动为包装器 div 中的每个项目分配绝对左侧位置，并且它的行为几乎符合预期。但是，当我单击左侧或右侧导航按钮时，它不是减少/增加每个项目上左侧定位的当前值，而是将它们全部更改为相同的值(这似乎是由组中的第一个项目确定的) )。

在这件事上我一直在用头撞墙。非常感谢任何见解!

这是我的按钮单击操作的示例:

$('.leftarrow').on('click', function() {
  $('.item').each(function() {
    $(this).animate({ left: '-=200' }, 1000);    
  });
});

<小时/>

编辑以添加所有代码片段

  var $item = $('.singleItem');

  var curX = 0;
  var move = 0;

  $item.each(function() {
    $(this).css('left', curX);

    curX += $(this).outerWidth(true);
    move = $(this).outerWidth();
  });

  $leftArrow = $('.leftarrow');
  $rightArrow = $('.rightarrow');

  $leftArrow.on('click', function() {
    $item.each(function() {
      $(this).animate({
        left: '-=255'
      }, 1000);
    });
  });

  $rightArrow.on('click', function() {
    $item.each(function() {
      $(this).animate({
        left: '+=255'
      }, 1000);
    });

  });

.scrolling_container {
  height: 250px;
  width: 90%;
  overflow: hidden;
  margin: 0 auto;
  background-color: red;
}
.scrolling_container .scrolling_inner {
  width: 500px;
  position: relative;
}
.singleItem {
  background: #dbdae0;
  position: absolute;
  width: 255px;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="scrolling_container">
  <div class="rightarrow">
    <h1>&raquo;</h1>
  </div>
  <div class="leftarrow">
    <h1>&laquo;</h1>
  </div>

  <ul class="scrolling_inner">
    <li class="singleItem">CONTENT</li>
    <li class="singleItem">CONTENT</li>
    <li class="singleItem">CONTENT</li>
    <li class="singleItem">CONTENT</li>
    <li class="singleItem">CONTENT</li>
  </ul>

</div>

Answer 1

看起来工作正常，我猜你的代码中还有其他东西弄乱了它。您能提供一段相关的代码吗？

$('.leftarrow').on('click', function() {
  $('.item').each(function() {
    $(this).animate({ left: '-=200' }, 1000);    
  });
});

.item { position: absolute; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="leftarrow">left</button>

<div class="item" style="top: 110px; left: 20px;">ITEM</div>
<div class="item" style="top: 120px; left: 200px;">ITEM</div>
<div class="item" style="top: 30px; left: 80px;">ITEM</div>
<div class="item" style="top: 40px; left: 230px;">ITEM</div>
<div class="item" style="top: 50px; left: 120px;">ITEM</div>
<div class="item" style="top: 60px; left: 0px;">ITEM</div>
<div class="item" style="top: 70px; left: 190px;">ITEM</div>
<div class="item" style="top: 80px; left: 310px;">ITEM</div>
<div class="item" style="top: 90px; left: 40px;">ITEM</div>
<div class="item" style="top: 100px; left: 60px;">ITEM</div>