jquery - 滑动时div的顺序显示不正确？

Question

我正在尝试根据时间间隔一个一个地滑动 div。第一次完整迭代，它将正确地一个一个地显示和隐藏。对于第二次迭代，它将显示三个 div 而不是显示两个 div。我不熟悉 jquery 和 css 等等。请帮我根据一定的时间间隔一个一个地滑动div。我在下面粘贴了我的代码

$(document).ready(function() {

  var delayMe = 0;
  /*
  $('.container div').siblings().each( function() {
      delayMe += 800;
      $(this).delay(delayMe).slideUp(300);
  	
  });
  */
  var divlength = $('.container').find('div');
  var i = 0;

  setTimeout(display, 3000);

  function display() {
    //alert(i);
    //alert(divlength[i].attr('class'));
    l = i;
    m = i + 1;
    n = i + 2;

    if (i == 2) {

      n = 0;
      //alert(i);
    }
    $(divlength[l]).css({
      "display": "none"
    });
    $(divlength[m]).css({
      "display": "block"
    });
    $(divlength[n]).css({
      "display": "block"
    });
    console.log(l + " " + m + " " + n + " " + i);
    if (i == 2) {
      i = 0;
    } else {
      i++;
    }

    //alert(i);
    //$(divlength[i+2]).css({"display":"block","margin-top":"100px"});

    setTimeout(display, 5000);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width:500px;hight:500px; border:1px solid #CC6600; margin-top:200px;">

  <div class="div" style="height:100px; background:red; display:block;">
    <p>Hai</p>
  </div>
  <div class="div" style="height:100px; background:green; display:block;">
    <p>el</p>
  </div>
  <div class="div" style="height:100px; background:blue; display:none;">
    <p>bgdfnbd</p>
  </div>
  <div class="div" style="height:100px; background:yellow; display:none;">
    <p>gvd</p>
  </div>

</div>
<input id="btn" type="button" value="click me"></input>

输出: 最初加载屏幕时:将显示红色和绿色 迭代 0:绿色和蓝色 迭代 1:蓝色和黄色 迭代 2:黄色和红色。这里红色显示在黄色之前。这是我的问题。因此，当迭代从 0 开始时，再次显示绿色、蓝色和黄色，而不是红色和绿色。提前致谢。

Answer 1

是否this fiddle回答你的问题

  function display() {
    var container = $('.container');
    var divs = $('.container').find('div');
    divs.css({
        "display": "none"
    });

    $(divs[1]).css({
        "display": "block"
    });

    $(divs[2]).css({
        "display": "block"
    });

    $(divs[0]).appendTo(container);


    setTimeout(display, 5000);
  }