滑动时，div序​​列无法正确显示？

Question

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

＆＃13;

＆＃13;

$(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);
  }

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

输出： 最初加载屏幕时：将显示红色和绿色 迭代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);
  }