Question

我想显示3个li，1秒后这3个li将会向上滑动，接下来的3 li会自动显示在div.#content

<div id="content">
    <ul>
        <li>122</li>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
    </ul>
</div>

我尝试使用toggle功能setTimeout，但它确实符合我的要求。我知道这个问题对某些人来说可能是愚蠢的，但我相信我真的需要你的指导，请指导我如何完成这项任务。如果有人指导我，我将不胜感激。我不想使用任何插件。

Answer 1

更好的方法（不是语义方式，但是）实现这一目的是包装每3 <li>然后遍历它们。一种方法是：

＆＃13;

$(function () {
  var lis = $("ul > li");
  for(var i = 0; i < lis.length; i+=3) {
    lis.slice(i, i+3).wrapAll("<div class='slide'></div>");
  }
  $(".slide").hide();
  $(".slide:first").slideDown();
  setInterval(function () {
    if ($(".slide:visible").next(".slide").length == 0) {
      $(".slide:visible").slideUp(function () {
        $(".slide:first").slideDown();
      });
    }
    else
      $(".slide:visible").slideUp(function () {
        $(this).next(".slide").slideDown();
      });
  }, 2500);
});

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="content">
  <ul>
    <li>122</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
</div>

＆＃13;

Answer 2

您可以使用 :lt() 和 :gt() 伪选择器

＆＃13;

var i = 2,
  $ul = $('#content ul'),
  int = setInterval(function() {
      $('li', $ul).slideUp();
      $('li:gt(' + i + '):lt(3)', $ul).slideDown();
      i += 3;
      if (i + 1 >= $('li', $ul).length) clearInterval(int);
    },
    2000)

＆＃13;

#content ul li:nth-child(n+4) {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <ul>
    <li>122</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
</div>

＆＃13;

<强>更新如果要连续滑动，则可以使用以下代码

＆＃13;

var i = 2,
  $ul = $('#content ul'),
  int = setInterval(function() {
      $('li', $ul).slideUp();
      $('li' + (i == -1 ? '' : ':gt(' + i + ')') + ':lt(3)', $ul).slideDown();
      i += 3;
      if (i + 1 >= $('li', $ul).length) i = -1;
    },
    2000)

＆＃13;

#content ul li:nth-child(n+4) {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <ul>
    <li>122</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
</div>

＆＃13;

Answer 3

这是另一种可能性：

＆＃13;

var steps = 3;
$(function tick() {
  setTimeout(function () {
    var top = '-=' + (steps * 31) + 'px';
    var lis = $('li:lt(' + steps + ')');
    var clones = lis.clone().appendTo('ul');
    $.when(
      $('li').animate({ top: top }, 'slow')
    ).done(function () {
      clones.remove();
      lis.appendTo('ul');
      $('li').css('top', 'auto');
      tick();
    });
  }, 1000);
});

＆＃13;

* {
  padding: 0;
  margin: 0;
}
ul {
  overflow: hidden;
  height: 92px;
}
li {
  display: block;
  position: relative;
  line-height: 30px;
  padding: 0 10px;
  background: #DDD;
  margin-bottom: 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li></ul>

＆＃13;

Answer 4

你可以试试这个：

$("li").hide();  // this will hide all li first
$('ul li:lt(3)').show(); // this will display first 3 li from all li

Answer 5

你可以这样做，

$("#content ul li").hide();
i = 0;
setInterval(function() {
  i = (i + 3) % $("#content ul li").length;
  $("#content > ul >li").slideUp();
  $("#content > ul >li:gt(" + i + ")").slideDown();
  $("#content > ul >li:gt(" + (i + 3) % $("#content ul li").length + ")").hide();
}, 1000);

Fiddle

如何使用jquery显示具体的li数？

5 个答案: