javascript - 使用 JQuery 隐藏和显示 div 一次只有两个 div 动画

Question

<div id="container">
                    <div id='div1' style="display:none;" class='cssdiv1'> 
                      <!-- content -->
                      <h1 style='color:#FFF7F7'>this is div 1 </h1>
                    </div>
                    <div id='div2'  style="display:none;" class='cssdiv2'> 
                      <!-- content -->
                      <h1 style='color:#FFF7F7'>this is div 2 </h1>
                    </div>
                    <div id='div3' style="display:none;" class='cssdiv3'> 
                      <!-- content -->
                      <h1 style='color:#FFF7F7'>this is div 3 </h1>
                    </div>
</div>

我有一个要求，我想一次只显示两个 div，并且它应该在一个循环中。

Answer 1

您可以使用元素的 length 和 Jquery 上的 append() 循环，如下所示:

$(document).ready(function(){
  var toloop = $('#container > div'),
      end    = toloop.length-1,
      start  = 0;
  toloop.eq(start).fadeIn(1000,shownext);
  function shownext() {
    start < end ? start++ : start=0;
    toloop.eq(start).fadeIn(1000);
    setTimeout(function(){
      toloop.eq(start).prev().slideUp(800,function(){
        $('#container').append($(this))
      });
      shownext();
    },2000)
  }
})

#container > div {
  width:90%;
  margin:0 auto;
  padding:10px 20px;
  background:purple;
  color:white;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div><h1>this is div 1</h1></div>
  <div><h1>this is div 2</h1></div>
  <div><h1>this is div 3</h1></div>
  <div><h1>this is div 4</h1></div>
  <div><h1>this is div 5</h1></div>
</div>