Javascript 相同的代码在网站和JSFIDLE上的作用不同

我有一些代码，允许用户通过单击来横向滚动，这在JSFIDLE上非常有效，但在我的实际网站上却完全不同。在我的网站上，你可以向右滚动一次，但不能再往前滚动，当你向后滚动时，它显然会向右滚动，越过左边的边框

我的网站上有一个问题的实时链接：

这是我的答案

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

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

$（文档）.ready（函数（）{
var$item=$（'div.item'），//缓存DOM选择器
visible=2，//设置将可见的项目数
index=0，//开始索引
endIndex=（$item.length/visible）-1；//结束索引
$（'div#arrowR'）。单击（函数（）{
如果（索引0）{
索引--；
$item.animate({
“左”：“+=300px”
});
}
});
});
#容器{
宽度：340px；
高度：50px；
}
#列表容器{
溢出：隐藏；
宽度：300px；
浮动：左；
}
.名单{
背景：灰色；
最小宽度：1400px；
浮动：左；
}
#阿罗尔{
背景：黄色；
宽度：20px；
高度：50px；
浮动：对；
光标：指针；
}
#阿罗尔{
背景：黄色；
宽度：20px；
高度：50px；
浮动：左；
光标：指针；
}
.项目{
背景：绿色；
宽度：140px；
高度：40px；
保证金：5px；
浮动：左；
位置：相对位置；
}

1.
2.
3.
4.
5.
6.
7.
8.
正如您所说，
1.10.0
在这方面有一些缺陷。我创建了一个修改过的版本，唯一的区别是jQuery使用的是版本
1.10.0
，您可以看到它现在的工作方式与您的站点类似

见：


影响

#13937:finish（）只完成设置为.animate（）d的集合的最后一项

#13939:1.10.0中断相对动画

及


描述

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

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


1.
2.
3.
4.
5.
6.
7.
8.
$（文档）.ready（函数（）{
var$item=$（'div.item'），//缓存DOM选择器
visible=2，//设置将可见的项目数
index=0，//开始索引
endIndex=（$item.length/visible）-1；//结束索引
animatepixels=0
$（'div#arrowR'）。单击（函数（）{
如果（索引0）{
索引--；
animatepixels=0-（索引*300）
$item.animate（{'left'：animatepixels+'px'}）；
}
});
});
好消息是我复制了错误的行为。坏消息是1.10.1没有加载到这台计算机上，所以我无法测试它在该版本下是否工作。（编辑：在1.11.1和1.9.1下，它工作正常；你确定它不是1.10.0中的bug吗？@Samurai8它在JSFIDLE上工作，我尝试过的每个jquery版本，所以你可以在随机版本中尝试。例如1.9.1确实有效。@Jasen你是什么意思？加载页面显示404个错误。但是fuyushimoya的回答似乎是你问题的原因。啊，该死的，真的吗？在我的情况下你会怎么做？升级到1.10.1？是的，如果可能的话，您可以使用
1.10.x
，其中
x
是最新版本，因为它可能与问题修复有关。您可以查看和来决定哪个版本适合您。我将尝试切换到最新的稳定版本，并开始修复由于库更新而中断的代码，但同样，当问题是关于库升级，或者哪一个版本时，它将成为基于意见的。根据您的经验，您认为升级到1.10.1会导致我现有代码中出现错误吗？我认为tiny version Bump只用于修复bug。正如您所说，tiny version主要用于修复bug，从更改日志来看，它不应该在您现有的代码中造成问题。