使用 JQuery 使用动画一次仅隐藏和显示 div 两个 div答案

【问题标题】：hide and show div only two divs at time with animation using JQuery使用 JQuery 使用动画一次仅隐藏和显示 div 两个 div
【发布时间】：2016-09-15 15:22:26
【问题描述】：

<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，它应该在一个循环中。

【问题讨论】：

一旦 2 个 div 可见，您希望它们中的一个何时隐藏而另一个可见？通过按钮点击什么的？
我想用setInterval(5000)来显示和隐藏div，应该是无限的。
在特定时间间隔后隐藏和显示，即 setTimeout()
你可以使用 jQuery 吗？
是的。你可以继续使用 jQuery

标签： javascript jquery css jquery-plugins

【解决方案1】：

您可以像这样在 Jquery 上使用 length 和 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>

【讨论】：

【解决方案2】：

希望对您有所帮助.... * 更改了字体颜色以提高可读性

var counter = 1

function toggleVisibility() {
  $("#div1, #div2, #div3").hide()
  $("#div"+ counter +", #div"+(counter+1)).fadeIn(500)
  if(counter < 2)
    counter++
  else
    counter--
}

toggleVisibility()
setInterval(toggleVisibility, 5000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id='div1' style="display:none;" class='cssdiv1'> 
    <!-- content -->
    <h1 style='color:#323232'>this is div 1 </h1>
  </div>
  <div id='div2'  style="display:none;" class='cssdiv2'> 
    <!-- content -->
    <h1 style='color:#323232'>this is div 2 </h1>
  </div>
  <div id='div3' style="display:none;" class='cssdiv3'> 
    <!-- content -->
    <h1 style='color:#323232'>this is div 3 </h1>
  </div>
</div>

【讨论】：