javascript - 一次循环十个元素

Question

在我的应用程序主页上，我希望一次显示十个元素的列表。几秒钟后，元素将更改为列表中的下十个元素，依此类推。

我有这种工作，但我一次只能让它工作一个元素，而不是一次十个元素。

var j = 0;
var inbetween = 2000; //milliseconds   
function page() {
  var jmax = $("ul#list li").length - 1;
  var count = 10;

  $("ul#list li:eq(" + j + ")")
    .animate({
      "opacity": "1"
    }, 400)
    .delay(inbetween)
    .animate({
      "opacity": "0"
    }, 400, function() {
      (j == jmax) ? j = 0: j++;
      page();
    });
};
page();

 ul#list {
   width: 200px;
   border: solid;
   position: relative;
   overflow: hidden;
   height: 200px
 }
 ul#list li {
   font-size: 1.4em;
   padding: 20px;
   opacity: 0;
   position: absolute
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id='list'>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eliven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
  <li>seventeen</li>
  <li>eighteen</li>
  <li>ninteen</li>
  <li>twenty</li>
</ul>

一个 jsFiddle 来帮助 http://jsfiddle.net/6bbmkujn/

任何事情都会有所帮助!

Answer 1

我不确定 position: absolute 是否是您想要的。或多或少，您似乎想要选择列表项的旋转子集以在任何时间点显示。我提出了以下更改:

ul#list {
  width: 200px;
  border: solid;
  height: 200px
}
ul#list li {
  font-size: 1.4em;
  display: none;
  margin: 0; padding: 0;
}

以及相应的 JavaScript:

var j = 1;
var inbetween = 2000; //milliseconds   
function page() {
  var jmax = $("ul#list li").length;
  var count = 10;

  var start = j;
  var end = j + count - 1;
  var complete = 0;
  console.log(j, start, end);

  var range = $('ul#list li:nth-child(n+'+ start + '):nth-child(-n+'+  end +')');
  range
    .show(400)
    .delay(inbetween)
    .hide(400, 'swing', function() {
      if (j++ >= jmax) {
        j = 1;
      }

      if (++complete >= count) {
        page();  
      }
    });
};
page();

您可以在此处查看示例:http://codepen.io/anon/pen/XJWpzK

唯一真正的变化是您可以看到我们正在使用 nth-child 选择器选择一系列元素(基于 j)。希望这会有所帮助。