最后如何使用jQuery重置脚本? [英] How can I reset script at the end using jQuery?

问题描述

我正尝试向上滑动三个li，而上一个li向上滑动则显示接下来的三个li.这工作正常.我在循环结束时遇到问题，我的意思是所有li都向上滑动，然后需要一些时间才能再次开始，我想快速重置.

I'm trying to slide up three li and next three li are showing once previous li slide up. This is working properly. I'm facing problem at the end of the loop, I means all li slide up then it take some time to start again i want to reset quickly.

<div id="content">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
     <li>7</li>
     <li>8</li>
     <li>9</li>
   </ul>
</div>

JS

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 >= $('li', $ul).length) i = -1;
      if (i == -1) {
      }
    },
    2000);

有人可以指导我该怎么做吗?

Can anyone guide me how can I do that?

演示示例

推荐答案

您需要为此更新if条件.如果该值等于或大于(li length) - 1，则应从头开始.

You need to update the if condition for that.If the value is equal or greater than (li length) - 1 then it should start from the beginning.

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);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

这篇关于最后如何使用jQuery重置脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！