Question

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

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

这是fiddle。

我真的复制并粘贴了代码。我在我的网站上使用jQuery 1.10.0，最接近的jQuery版本jsfiddle是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中确实存在一个错误，但是对于将来遇到此问题但又不想升级的人来说，我找到了一种方法来使这个功能在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>

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

2 个答案: