相同的代码在网站和 jsfiddle 上的行为不同

Question

我有一些代码旨在允许用户通过单击横向滚动，这在 jsfiddle 上运行良好，但在我的实际网站上却完全不同。在我的网站上，您可以向右滚动一次，但不能再滚动一次，当您向后滚动时，它显然会向右滚动到左侧边框之外。

这是我网站上问题的实时链接：rouvou.com/error

这是fiddle。

我从字面上复制并粘贴了代码。我在我的网站上使用 jQuery 1.10.0，而 jsfiddle 最接近的 jQuery 版本是 1.10.1，但我无法想象这会导致这种不同的行为。我发布的 html 是整个页面上唯一的代码。在这两个地方，我都在 Ubuntu 上使用 Chrome 版本 42.0.2311.152（64 位）。

为什么代码在 jsfiddle 和我的网站上会有不同的结果？

$(document).ready(function() {
  var $item = $('div.item'),                 //Cache your DOM selector
    visible = 2,                             //Set the number of items that will be visible
    index = 0,                               //Starting index
    endIndex = ($item.length / visible) - 1; //End index

  $('div#arrowR').click(function() {
    if(index < endIndex) {
      index++;
      $item.animate({
        'left': '-=300px'
      });
    }
  });

  $('div#arrowL').click(function() {
    if(index > 0) {
      index--;
      $item.animate({
        'left': '+=300px'
      });
    }
  });
});

#container {
  width: 340px;
  height: 50px;
}
#list-container {
  overflow: hidden;
  width: 300px;
  float: left;
}
.list {
  background: grey;
  min-width: 1400px;
  float: left;
}
#arrowR {
  background: yellow;
  width: 20px;
  height: 50px;
  float: right;
  cursor: pointer;
}
#arrowL {
  background: yellow;
  width: 20px;
  height: 50px;
  float: left;
  cursor: pointer;
}
.item {
  background: green;
  width: 140px;
  height: 40px;
  margin: 5px;
  float: left;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="container">
  <div id="arrowL">
  </div>
  <div id="arrowR">
  </div>
  <div id="list-container">
    <div class='list'>
      <div class='item'>1
      </div>
      <div class='item'>2
      </div>
      <div class='item'>3
      </div>
      <div class="item">4
      </div>
      <div class='item'>5
      </div>
      <div class='item'>6
      </div>
      <div class='item'>7
      </div>
      <div class="item">8
      </div>
    </div>
  </div>
</div>

Answer 1

似乎正如你所说，1.10.0 有一些错误。我创建了你的jsfiddle 的修改版本，唯一的区别是jQuery 使用的是1.10.0 版本，你可以看到它现在就像你的网站一样工作。

见jQuery 1.10.1 Change log：

• 效果

#13937:finish() 只完成集合中的最后一项是 .animate()d。

#13939: 1.10.0 打破相对动画

还有issue ticket#13939：

• 说明

相对动画（使用 += 或 -=）在 1.10.0 中被破坏。例如， $('h1').animate({marginLeft: '+=100px'});不工作。

因此，您可能必须切换到版本 1.10.x，其中 x 是最新版本，因为它们的更改主要是问题修复，而不是功能更改。

Answer 2

问题是1.10.0确实有bug，但是对于以后有这个问题又不想升级的人，我想办法让这个功能在1.10.0上也能正常工作。

    <div id="container">
        <div id="arrowL">
        </div>
        <div id="arrowR">
        </div>
        <div id="list-container">
            <div class='list'>
                <div class='item'>1
                </div>
                <div class='item'>2
                </div>
                <div class='item'>3
                </div>
                <div class="item">4
                </div>
                <div class='item'>5
                </div>
                <div class='item'>6
                </div>
                <div class='item'>7
                </div>
                <div class="item">8
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    $(document).ready(function() {

        var $item = $('div.item'), //Cache your DOM selector
            visible = 2, //Set the number of items that will be visible
            index = 0, //Starting index
            endIndex = ( $item.length / visible ) - 1; //End index
            animatepixels = 0

        $('div#arrowR').click(function(){
            if(index < endIndex ){
              index++;
              animatepixels = 0 - (index * 300)
              $item.animate({'left':animatepixels+'px'});
            }
        });

        $('div#arrowL').click(function(){
            if(index > 0){
              index--;
              animatepixels= 0 - (index * 300)
              $item.animate({'left':animatepixels+'px'});
            }
        });

    });
    </script>