jQuery Horizo​​ntal Scrolling动画无法正常工作

Question

我在jquery水平滚动动画中遇到麻烦。我正在渲染数据库中的所有列表数据。它总是只能看到4个项目。但在滚动时它不显示隐藏的项目而不显示4项。并且还在单个滚动后滚动停止我希望它滚动直到它到达列表的末尾。请问如何解决。

[风格]

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content {
    width: 500px;
}

.scroller {
    border: 1px solid #f00;
    height: 100px;
    width: auto;
    overflow: hidden;
}

    .scroller li {
        float: left;
    }

    .scroller li {
        width: 24.5%;
        height: 100%;
        text-align: center;
        border: 1px solid #444;
    }

.item {
    background: green;
    position: relative;
}

[HTML]

<div id="content">
    <ul class="scroller">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
    </ul>
    <a href="javascript:void(0);" id="prev">&laquo;</a>
    <a href="javascript:void(0);" id="next">&raquo;</a>
</div>

[jquery的]

$(document).ready(function () {
    var $item = $('li.item'),
    visible = 4,
    index = 0,
    endIndex = ($item.length / visible) - 1;
    $('#next').click(function () {
        if (index < endIndex) {
            index++;
            $item.animate({ 'left': '-=100px' });
        }
    });
    $('#prev').click(function () {
        if (index > 0) {
            index--;
            $item.animate({ 'left': '+=100px' });
        }
    });
});

Answer 1

试试这个代码段。 我稍微改变了你的css和代码

$(document).ready(function() {
var $item = $('li.item'), 
visible = 4, 
index = 0,
endIndex = ( $item.length - visible ) -1; 
$('#content').css('width', visible * 100 + 'px');
$('#next').click(function(){
  if (index <= endIndex) {
    index++;
    $item.animate({'left':'-=100px'});
  }
});
$('#prev').click(function(){
    if (index > 0) {
      index--;
      $item.animate({'left':'+=100px'});
    }
  });
});

* {margin:0;padding:0;list-style: none;}
#content{width:500px;}
.scroller{border:1px solid #f00;height:100px;width:auto;overflow:hidden; display: -webkit-box;}
.item{
  background:green;
  position:relative;
  float:left;
  width:98px;
  height:100%;
  text-align:center;
  border:1px solid #444;} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
    <ul class="scroller">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
        <li class="item">10</li>
    </ul>
    <a href="javascript:void(0);" id="prev">&laquo;</a>
    <a href="javascript:void(0);" id="next">&raquo;</a>
</div>