2

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

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

这是小提琴。

我从字面上复制并粘贴了代码。我在我的网站上使用 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>

4

2 回答 2

2

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

请参阅jQuery 1.10.1 更改日志：

  • 效果

#13937：finish() 仅完成集合的最后一项是 .animate()d。

#13939：1.10.0 打破了相对动画

和问题单#13939：

  • 描述

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

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

于 2015-08-07T17:37:59.193 回答
0

问题是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>
于 2015-08-08T17:11:35.607 回答